CSS实现的3D旋转（三维）结果,transform-style

发布时间：2018-08-16 10:51:05 所属栏目：访谈来源：站长网

导读：一款CSS实现的3D旋转（三维）结果，叫作：transform-style实例，小编别离在 IE8 、opera下测试均无法表现结果，在IE下表现的是层叠结果，在opera下表现的层重叠结果，在chrome赏识器下可以表现三维旋转的层，结果还长短常不错的。演示： !DOCTYPE htmlhtm

　　一款CSS实现的3D旋转（三维）结果，叫作：transform-style实例，小编别离在IE8、opera下测试均无法表现结果，在IE下表现的是层叠结果，在opera下表现的层重叠结果，在chrome赏识器下可以表现三维旋转的层，结果还长短常不错的。

　　演示：

<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>transform-style的3D结果测试</title> <style> *{font-size: 14px;color: #fff; padding:0; margin:0;} #container { position: relative; height: 300px; width: 300px; -webkit-perspective: 500; margin-top: 200px; margin-right: auto; margin-left: auto; } #parent { margin: 10px; width: 280px; height: 280px; background-color: #666; opacity: 0.8; -webkit-transform-style: preserve-3d; -webkit-animation: spin 5s infinite linear; } #parent > div { position: absolute; top: 40px; left: 40px; width: 280px; height: 200px; padding: 10px; -webkit-box-sizing: border-box; } #parent > :first-child { background-color: #000; -webkit-transform: translateZ(-100px) rotateY(45deg); } #parent > :last-child { background-color: #333; -webkit-transform: translateZ(50px) rotateX(20deg); -webkit-transform-origin: 50% top; } /*执行Y轴旋转360度动画*/ @-webkit-keyframes spin { from {-webkit-transform: rotateY(0);} to {-webkit-transform: rotateY(360deg);} } </style> </head> <body> <div id="container"> <div id="parent"> <div><a href="http://www.liuxiaofan.com/">刘晓帆的博客</a></div> <div><a href="http://www.veryhuo.com/">会见猛火网站</a></div> </div> </div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!