[英]Rotate and preserve 3d not working
动画正在工作,但是如果停止动画旋转并保留3d工作,则#sun不会与保留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);
}
}
通常,当您像这样进行转型时,我认为您需要对主要div有所了解。
喜欢:
body{
-webkit-perspective: 500px; /* Chrome, Safari, Opera */
perspective: 500px;
}
演示: 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) ;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.