css 3d旋转
2016-02-19 15:05
351 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="renderer" content="webkit" /> <style> .rect{width:100px;height:100px;position:absolute;top:100px;left:100px;border:1px solid #000;text-align:center;line-height:100px;font-size:30px;background:#fcc;} .parrent{width:300px;height:300px;position:absolute;top:100px;left:200px;border:2px solid #f00;border-radius:150px; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; } .border{position:absolute;top:0;left:0;width:100%;height:100%;top:0;left:0;border-radius:50%;border:2px solid #f00;} .anmtx{transform: translateZ(75px); animation:mymove 5s infinite linear; -webkit-animation:mymove 5s infinite linear; -moz-animation:mymove 5s infinite linear; -o-animation:mymove 5s infinite linear; } @keyframes mymove{ from{transform:rotateX(0deg) rotateY(0deg);} to{transform:rotateX(360deg) rotateY(360deg);} } @-webkit-keyframes mymove{ from{-webkit-transform:rotateX(0deg) rotateY(0deg);} to{-webkit-transform:rotateX(360deg) rotateY(360deg);} } @-moz-keyframes mymove{ from{-moz-transform:rotateX(0deg) rotateY(0deg);} to{-moz-transform:rotateX(360deg) rotateY(360deg);} } @-o-keyframes mymove{ from{-o-transform:rotateX(0deg) rotateY(0deg);} to{-o-transform:rotateX(360deg) rotateY(360deg);} } </style> </head> <body> <div class="parrent anmtx"> <div class="rect" style="transform:rotateX(0deg) translateZ(50px)">1</div> <div class="rect" style="transform:rotateY(-90deg) translateZ(50px) ;">2</div> <div class="rect" style="transform:rotateY(90deg) translateZ(50px);">3</div> <div class="rect" style="transform: rotateX(90deg) translateZ(50px);">4</div> <div class="rect" style="transform:rotateX(-90deg) translateZ(50px) ;">5</div> <div class="rect" style="transform:rotateX(180deg) translateZ(50px) ;">6</div> <div class="border" style="transform:rotateX(90deg);"></div> <div class="border" style="transform:rotateY(90deg);"></div> </div> </body> </html>
相关文章推荐
- 9 款你必须知道的 Material Design 调色板
- HTML/CSS行内元素、块元素、空(void)元素、盒模型
- Css的优先级机制
- CSS之使用clearfix清除浮动
- CSS3中animation属性的使用
- 铁路样式sld
- 你所不知的 CSS ::before 和 ::after 伪元素用法
- css3中div的水平,垂直居中
- servlet跳转到jsp页面,jsp样式失效怎么解决!
- Css3学习笔记
- CSS3 calc() 会计算的属性
- CSS3选择器(全)
- CSS3用户界面
- CSS3中的网页布局
- CSS3中的2D变形
- CSS文本、字体与颜色
- CSS新增特性和CSS选择器
- 14.使用 CSS 显示 XML
- CSS发展史
- css srpites css精灵