本篇文章为大家展示了CSS3中怎么实现立方体自转效果 ，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
先是HTML 一个父div包含四个绝对定位的div
<div class='container container--realistic'> <div class='cube cube--ani'> <div class='face'>1</div> <div class='face'>2</div> <div class='face'>3</div> <div class='face'>4</div> </div> </div>
首先，一个静态的立方体
.face:nth-child() {
-webkit-transform: /*rotateY(deg)*/ translateZ(.em /* half the side length, em in this case */);
}
.face:nth-child() {
-webkit-transform: rotateY( deg) translateZ(.em);
}
.face:nth-child() {
-webkit-transform: rotateY(deg) translateZ(.em);
}
.face:nth-child() {
-webkit-transform: rotateY(deg) translateZ(.em);
}让立方体转起来
.cube--ani {
-webkit-animation: rot s linear infinite;
}
@-webkit-keyframes rot {
to { -webkit-transform: rotateY(-deg) rotateX(deg); }
}上述内容就是CSS3中怎么实现立方体自转效果 ，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
