2

我准备了这个小提琴来证明我的问题：http: //jsfiddle.net/Nvy3F/

<div id="cube">
        <div id="face1"></div>
        <div id="face2"></div>
        <div id="face3"></div>
        <div id="face4"></div>
        <div id="face5"></div>
       <div id="face6"></div> 
</div>

            @keyframes mb_rotate {
            0% {transform:rotateY(0deg);}
            25% {transform:rotateY(90deg);}
            50% {transform:rotateY(180deg);}
            75% {transform:rotateY(270deg);}                
            100% {transform: rotateY(360deg);}
        }

        @-webkit-keyframes mb_rotate {
            0% {-webkit-transform:rotateY(0deg);}
            25% {-webkit-transform:rotateY(90deg);}
            50% {-webkit-transform:rotateY(180deg);}
            75% {-webkit-transform:rotateY(270deg);}                
            100% {-webkit-transform: rotateY(360deg);}
        }         
 /*   */

        #cube {
            backface-visibility:hidden;
            width:300px;height:300px;
            transform-style:preserve-3d;
            -webkit-transform-style:preserve-3d;                
            /*transition:transform 1300ms linear 0s;*/
            position:relative;
            margin: 0 auto;
            animation: 10s mb_rotate infinite linear;
            -webkit-animation: 10s mb_rotate infinite linear;
        }

        #face1 {
            width:300px;height:250px;                
            transform:translateZ(125px);
            -webkit-transform:translateZ(125px);
            background:green;
            backface-visibility:hidden;
            position:absolute;

        }

        #face2 {
            width:300px;height:250px;
            transform:rotateX(90deg) translateZ(125px);
            -webkit-transform:rotateX(90deg) translateZ(125px);
            background:red;
            backface-visibility:hidden;
            position:absolute;                
        }

        #face3 {
            width:300px;height:250px;
            transform:rotateY(180deg) translateZ(125px) rotateZ(0deg);
            -webkit-transform:rotateY(180deg) translateZ(125px) rotateZ(0deg);
            background:blue;
            backface-visibility:hidden;
            position:absolute;                
        }

        #face4 {
            width:300px;height:250px;
            transform:rotateX(-90deg) translateZ(125px) rotate(180deg) rotateZ(180deg);
            -webkit-transform:rotateX(-90deg) translateZ(125px) rotate(180deg) rotateZ(180deg);
            background:yellow;
            backface-visibility:hidden;
            position:absolute;                
        }

        #face5 {
            width:250px;height:250px;                
            transform:rotateY(90deg) translateZ(175px);
            -webkit-transform:rotateY(90deg) translateZ(175px);
            background:orange;
            backface-visibility:hidden;
            position:absolute;                
        }

        #face6 {
            width:250px;height:250px;
            transform:rotateY(-90deg) translateZ(125px);
            -webkit-transform:rotateY(-90deg) translateZ(125px);
            background:purple;
            backface-visibility:hidden;
            position:absolute;                
        }

如果您在 Firefox 桌面浏览器上运行它，它应该显示旋转框（带有彩色边）。盒子绕它的 y 轴旋转。

如果您在默认浏览器上使用 android 4.1.2 在 SGS2 上运行它，它看起来仍然不错。

但...

如果您在 HTC One 上使用 android 4.1.2 在默认浏览器上运行它，它会在旋转经过 90 度旋转后开始消失。然后当动画经过 270 度框后，屏幕上再次出现。

我尝试了很多方法来解决这个问题，搜索了网络，但仍然不知道为什么会发生这种情况，也许有人可以提供帮助。

4

0 回答 0