CSS3中怎么实现立方体自转效果

发布时间：2021-08-07 17:06:58 阅读：95 作者：Leah 栏目：web开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

本篇文章为大家展示了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中怎么实现立方体自转效果，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

CSS3中怎么实现立方体自转效果

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签