css3实现立方体,并且自转效果_html/css_WEB-ITnose
首先,一个静态的立方体
.face:nth-child(1) { -webkit-transform: /*rotateY(0deg)*/ translateZ(2.5em /* half the side length, 5em in this case */); } .face:nth-child(2) { -webkit-transform: rotateY( 90deg) translateZ(2.5em); } .face:nth-child(3) { -webkit-transform: rotateY(180deg) translateZ(2.5em); } .face:nth-child(4) { -webkit-transform: rotateY(270deg) translateZ(2.5em); }
让立方体转起来
.cube--ani { -webkit-animation: rot 4s linear infinite; } @-webkit-keyframes rot { to { -webkit-transform: rotateY(-330deg) rotateX(370deg); } }
这里定义了一个动画 rot
从起始位置转动到 Y轴-330deg X轴370deg
并且循环无限次,每次4s
OK!
上一篇: jQuery实现自动与手动切换的滚动新闻特效代码分享_jquery
下一篇: 移动端meta行的汇总
推荐阅读
-
基于CSS3实现立方体自转效果
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose
-
CSS3实现的3D旋转效果_html/css_WEB-ITnose
-
CSS3 实现loading动画效果_html/css_WEB-ITnose
-
CSS3实战开发:使用CSS3实现photoshop的过滤效果_html/css_WEB-ITnose
-
基于CSS3实现立方体自转效果
-
纯CSS3画出小黄人并实现动画效果_html/css_WEB-ITnose
-
CSS3实现3D效果的图片墙_html/css_WEB-ITnose