Question

动画正在运行，但是#sun旋转不使用保留3d，如果停止动画旋转并保留3d工作。如何使动画和所有旋转工作？

HTML：

<div class="holder">
     <div class="system">
         <img src="image/sun.png"class="objects" id="sun">
    </div></div>

的CSS：

.holder{width:40%;height:50%;margin-left:10%;margin-top:10%;position:relative;
        -ms-transform:rotateX(75deg);
     -moz-transform:rotateX(75deg);
     -webkit-transform:rotateX(75deg);
         -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
        }
.system{
    position:relative;height:100%;width:100%;   
    -webkit-animation: orbit 5s linear infinite;
-moz-animation: orbit 5s linear infinite;
    animation: orbit 5s linear infinite;
}
#sun{transform:rotateX(75deg);width:8%;height:10%;position:relative;
-ms-transform:rotateX(75deg);
     -moz-transform:rotateX(75deg);
     -webkit-transform:rotateX(75deg);
}
@-webkit-keyframes orbit {
          from {
            -webkit-transform: rotateZ(0deg);
          }

          to {
            -webkit-transform: rotateZ(360deg);
          }
        }

Answer 1

通常当你像这样进行转型时，我认为你需要对主要的div有一个观点。

像：

body{
-webkit-perspective: 500px; /* Chrome, Safari, Opera */
perspective: 500px;
}

Answer 2

演示：http://codepen.io/Alesso05/pen/vEdfJ

这不会运行：

#holder{
         -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
        }
        #sun{
             transform:rotateX(75deg);
-ms-transform:rotateX(75deg);
     -moz-transform:rotateX(75deg);
     -webkit-transform:rotateX(75deg) ;
}

旋转并保留3d不工作

2 个答案: