为了把明天的工作做好，我们必须把今天的工作先做好了，不要给明天的工作找麻烦。在工作面前，态度决定一切。没有不重要的工作，只有不重视工作的人。不同的态度，成就不同的人生，有什么样的态度就会产生什么样的行为，从而决定不同的结果。
先是HTML 一个父div包含四个绝对定位的div CSS Code复制内容到剪贴板
- <divclass='containercontainer--realistic'>
- <divclass='cubecube--ani'>
- <divclass='face'>1</div>
- <divclass='face'>2</div>
- <divclass='face'>3</div>
- <divclass='face'>4</div>
- </div>
- </div>
CSS Code复制内容到剪贴板
- .face:nth-child(){
- -webkit-transform:/*rotateY(deg)*/translateZ(.em/*halfthesidelength,eminthiscase*/);
- }
- .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);
- }
CSS Code复制内容到剪贴板
- .cube--ani{
- -webkit-animation:rotslinearinfinite;
- }
- @-webkit-keyframesrot{
- to{-webkit-transform:rotateY(-deg)rotateX(deg);}
- }
从起始位置转动到 Y轴-330deg X轴370deg
并且循环无限次，每次4s
基于CSS3实现立方体自转效果 的全部内容就给大家介绍完了，希望对大家有所帮助！
以上就是基于CSS3如何实现立方体自转效果。最可怕的就是你认为和你最密切的人却是在背后算计你最深的人。更多关于基于CSS3如何实现立方体自转效果请关注haodaima.com其它相关文章！
