CSS3正方体旋转示例代码
2013-08-08 15:42
441 查看
效果图:
css代码:
html代码:
css代码:
@keyframes spin {from { transform: rotateY(0); }to { transform: rotateY(-360deg); }} @keyframes spin-vertical {from { transform: rotateX(0); }to { transform: rotateX(360deg); }} /*************** 水平立方体 ***************/ .cube-wrap {perspective: 800px;perspective-origin: 50% 100px;float:left;margin:150px 0 0 200px;} .cube {position: relative;width: 200px;-moz-transform-style: preserve-3d;-moz-animation: spin 20s infinite linear;} .cube div{position: absolute;width: 200px;height: 200px;background: rgba(255,255,255,0.1);box-shadow: inset 0 0 30px rgba(125,125,125,0.8);text-align: center;line-height: 200px;font-weight:bold;text-shadow:-1px 1px 5px #f60;color:#fff;font-family: sans-serif;text-transform: uppercase;font-size:30px;} .depth div.back-pane {transform: translateZ(-100px) rotateY(180deg);} .depth div.right-pane {transform:rotateY(-270deg) translateX(100px);transform-origin: top right;} .depth div.left-pane {transform:rotateY(270deg) translateX(-100px);transform-origin: center left;} .depth div.top-pane {transform:rotateX(-90deg) translateY(-100px);transform-origin: top center;} .depth div.bottom-pane {transform:rotateX(90deg) translateY(100px);transform-origin: bottom center;} .depth div.front-pane {transform: translateZ(100px);} /*************** 垂直旋转的立方体 ***************/ .cube-wrap.vertical .cube {transform-origin: 0 100px;animation: spin-vertical 5s infinite linear;} .cube-wrap.vertical .depth div.top-pane {transform:rotateX(-270deg) translateY(-100px);} .cube-wrap.vertical .depth div.back-pane {transform: translateZ(-100px) rotateX(180deg);} .cube-wrap.vertical .depth div.bottom-pane {transform: rotateX(-90deg) translateY(100px);} /*************** 平面旋转的立方体 ***************/ .cube-wrap.flat {perspective: none;perspective-origin: 0 0;}
html代码:
<div class="cube-wrap"> <div class="cube depth"> <div class="front-pane">front</div> <div class="back-pane">back</div> <div class="top-pane">top</div> <div class="bottom-pane">bottom</div> <div class="left-pane">left</div> <div class="right-pane">right</div> </div> </div> <div class="cube-wrap vertical"> <div class="cube depth"> <div class="front-pane">front</div> <div class="back-pane">back</div> <div class="top-pane">top</div> <div class="bottom-pane">bottom</div> <div class="left-pane">left</div> <div class="right-pane">right</div> </div> </div> <div class="cube-wrap flat"> <div class="cube depth"> <div class="front-pane">front</div> <div class="back-pane">back</div> <div class="top-pane">top</div> <div class="bottom-pane">bottom</div> <div class="left-pane">left</div> <div class="right-pane">right</div> </div> </div>
相关文章推荐
- 代码: CSS3动画,简单示例(鼠标移上去后,背景图片旋转)
- CSS3实现文字波浪线效果示例代码
- 【HTML5示例代码分享】基于CSS3和jQuery的相片墙效果
- 【JS+CSS3】实现带预览图幻灯片效果的示例代码
- iOS优雅的将CALayer旋转360度示例代码
- CSS3 3D旋转动画代码实例
- css3的@media属性实现页面响应式布局示例代码
- 实现CSS3中的border-radius(边框圆角)示例代码
- Android中imageView图片放大缩小及旋转功能示例代码
- 小程序图片剪裁加旋转的示例代码
- 【示例代码】3D旋转图片立体展示jquery幻灯片插件(附源码)
- css3动画效果 正方体3d旋转
- CSS3 实用技巧:实现黑白图像效果示例代码
- CSS3 旋转代码备忘
- 利用three.js画一个3D立体的正方体示例代码
- 代码希望HTML5初探-CSS3新特性小示例
- CSS3的正方体自动旋转
- 纯css3 360旋转代码
- 通过css旋转字体示例代码
- 【示例代码】基于jQuery和CSS3的图片层叠效果插件