css3实现立方体,并且自转效果
2014-02-27 11:23
260 查看
http://jsfiddle.net/8Tb6x/
先是HTML 一个父div包含四个绝对定位的div
首先,一个静态的立方体
让立方体转起来
这里定义了一个动画 rot
从起始位置转动到 Y轴-330deg X轴370deg
并且循环无限次,每次4s
OK!
先是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(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!
相关文章推荐
- css3实现立方体,并且自转效果
- 基于CSS3实现立方体自转效果
- 不使用JS,使用CSS3 target 以及 动画效果实现,点击一下弹出,并且保持弹出状态,然后再点击一下弹回的导航栏(或者可以叫做按钮)
- css3实现点击切换背景图片,并且背景图片实现动画效果
- 纯css3实现立方体旋转效果
- css3实现立方体效果
- css3实现逐渐变大的圆填充div背景的效果
- Html+CSS3技术实现动画、天气图标动态效果 效果很酷
- 纯CSS3实现的标签效果
- 使用 jQuery & CSS3 实现优雅的手风琴效果
- CSS3实现10种Loading效果
- Girdview实现滚动条效果,并且Head部分不滚动
- 纯 CSS3 实现波浪效果
- 15 个用 CSS3 实现的文本效果
- CSS3实现可关闭的下拉手风琴菜单效果
- 用css3实现各种图标效果
- 用CSS3实现带有阴影效果和颜色渐变的按钮
- 使用jQuery和CSS3实现的“加载中”效果按钮 极客标签 - 做最棒的极客知识分享平台
- CSS3实用技巧:几行代码实现图片黑白效果
- 使用 CSS3 可以实现的五种很酷很炫的效果