028-86922220
建站资讯

网站建设资讯

为你提供网站建设行业资讯、网站优化知识、主机域名邮箱、网站开发常见问题等。
当前位置：首页 - 全部资讯

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

本篇文章为大家展示了CSS3中怎么实现立方体自转效果 ，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联成都网站建设专业公司，是成都网站开发公司,为服务器租用提供网站建设服务,有成熟的网站定制合作流程，提供网站定制设计服务：原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站改版热线：028-86922220

先是HTML 一个父div包含四个绝对定位的div 

  1.     
    
1
     2
     3
     4         

首先，一个静态的立方体 

  1. .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);    
}

让立方体转起来 

  1. .cube--ani {    
-webkit-animation: rot s linear infinite;    
}    
@-webkit-keyframes rot {    
to { -webkit-transform: rotateY(-deg) rotateX(deg); }    
}

上述内容就是CSS3中怎么实现立方体自转效果 ，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。


网站栏目：CSS3中怎么实现立方体自转效果
分享链接：http://www.whjierui.cn/article/pohgsh.html

其他资讯