大佬教程收集整理的这篇文章主要介绍了为什么过渡在 Safari 浏览器中不起作用？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决为什么过渡在 Safari 浏览器中不起作用？？

<style>
    * {
        margin: 0;
        padding: 0;
        -webkit-Box-sizing: border-Box;
        Box-sizing: border-Box;
    }



    .main-cube-wrapper {
        height: 80px;
        position: relative;
        margin-top: 2rem;
    }

    .wrap {
        -webkit-perspective: 1000px;
        perspective: 1000px;
        -webkit-perspective-origin: 50% 50%;
        perspective-origin: 50% 50%;
    }

    .cube {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        wIDth: 80px;
        height: 80px;
        margin: auto;
        -webkit-animation-name: rotate;
        animation-name: rotate;
        -webkit-animation-duration: 30s;
        animation-duration: 30s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    .cube div {
        position: absolute;
        opacity: 0.7;
        wIDth: 80px;
        height: 80px;
    }

    .face-1 {
        BACkground: red;
        -webkit-transform: rotateY(0deg) translateZ(40pX);
        transform: rotateY(0deg) translateZ(40pX);
    }

    .face-2 {
        BACkground: green;
        -webkit-transform: rotateY(90deg) translateZ(40pX);
        transform: rotateY(90deg) translateZ(40pX);
    }

    .face-3 {
        BACkground: blue;
        -webkit-transform: rotateY(180deg) translateZ(40pX);
        transform: rotateY(180deg) translateZ(40pX);
    }

    .face-4 {
        BACkground: yellow;
        -webkit-transform: rotateY(-90deg) translateZ(40pX);
        transform: rotateY(-90deg) translateZ(40pX);
    }

    .face-5 {
        BACkground: purple;
        -webkit-transform: rotateX(90deg) translateZ(40pX);
        transform: rotateX(90deg) translateZ(40pX);
    }

    .face-6 {
        BACkground: orange;
        -webkit-transform: rotateX(-90deg) translateZ(40pX);
        transform: rotateX(-90deg) translateZ(40pX);
    }

    @-webkit-keyframes rotate {
        0% {
            -webkit-transform: rotate3d(0,0);
            transform: rotate3d(0,0);
        }

        100% {
            -webkit-transform: rotate3d(0,1,360deg);
            transform: rotate3d(0,360deg);
        }
    }

    @keyframes rotate {
        0% {
            -webkit-transform: rotate3d(0,360deg);
        }
    }
</style>


<div class="main-cube-wrapper">
    <div class="wrap">
        <div class="cube">
            <div class="face-1"></div>
            <div class="face-2"></div>
            <div class="face-3"></div>
            <div class="face-4"></div>
            <div class="face-5"></div>
            <div class="face-6"></div>
        </div>
    </div>
</div>

我正在学习和从事一些项目，我使用 SCSS 创建了旋转立方体，并且我已经检查过立方体是否在除“Safari 浏览器”之外的每个浏览器中平移或旋转。任何人都可以帮我解决这个问题，这样立方体也可以旋转并在 safari 浏览器中正常工作。

解决方法

div {
  width: 100px;
  height: 100px;
  BACkground: red;
  margin: 20px;
}

.rotate-2d { -webkit-animation: rotate-2d 1s linear infinite; }
.rotate-3d { -webkit-animation: rotate-3d 1s linear infinite; }
.rotate-3d-v2 { -webkit-animation: rotate-3d-v2 1s linear infinite; }
div:after {
  content: 'A';
  display: inline-block;
  width: 10px;
  height: 20px;
  color: green;
  font-size: 100px;
}

@-webkit-keyframes rotate-2d {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate-3d {
  0% {
    -webkit-transform: rotate3d(0,1,0deg);
  }
  100% {
    -webkit-transform: rotate3d(0,360deg);
  }
}

@-webkit-keyframes rotate-3d-v2 {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
  }
}

<div class="rotate-2d"></div>
<div class="rotate-3d"></div>
<div class="rotate-3d-v2"></div>

.main-cube-wrapper {
  height: 180px;
  position: relative;
  margin-top: 2rem;
}

.wrap {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}

.cube {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 80px;
  height: 80px;
  margin: auto;
  -webkit-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.cube div {
        position: absolute;
        opacity: 0.7;
        width: 80px;
        height: 80px;
    }

.face-1 {
  BACkground: red;
  -webkit-transform: rotateY(0deg) translateZ(40pX);
  transform: rotateY(0deg) translateZ(40pX);
}

.face-2 {
  BACkground: green;
  -webkit-transform: rotateY(90deg) translateZ(40pX);
  transform: rotateY(90deg) translateZ(40pX);
}

.face-3 {
  BACkground: blue;
  -webkit-transform: rotateY(180deg) translateZ(40pX);
  transform: rotateY(180deg) translateZ(40pX);
}

.face-4 {
  BACkground: yellow;
  -webkit-transform: rotateY(-90deg) translateZ(40pX);
  transform: rotateY(-90deg) translateZ(40pX);
}

.face-5 {
  BACkground: purple;
  -webkit-transform: rotateX(90deg) translateZ(40pX);
  transform: rotateX(90deg) translateZ(40pX);
}

.face-6 {
  BACkground: orange;
  -webkit-transform: rotateX(-90deg) translateZ(40pX);
  transform: rotateX(-90deg) translateZ(40pX);
}
   
@-webkit-keyframes rotate {
  0% {
    transform: rotate3d(0,0);
  }
  50% {
    transform: rotate3d(0,180deg);
  }
  100% {
    transform: rotate3d(0,360deg);
  }
}

<div class="main-cube-wrapper">
    <div class="wrap">
        <div class="cube">
            <div class="face-1"></div>
            <div class="face-2"></div>
            <div class="face-3"></div>
            <div class="face-4"></div>
            <div class="face-5"></div>
            <div class="face-6"></div>
        </div>
    </div>
</div>

大佬总结

以上是大佬教程为你收集整理的为什么过渡在 Safari 浏览器中不起作用？全部内容，希望文章能够帮你解决为什么过渡在 Safari 浏览器中不起作用？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。