实现CSS3多面体旋转效果
分类:实例代码
CSS3多面体旋转效果属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它实现了鼠标悬浮多面体旋转效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> #box { width: 100px; height: 100px; padding: 100px; border: 5px solid #000; perspective: 200px; perspective-origin: center center; margin: 100px auto; } #div { position: relative; width: 100px; height: 100px; transform-style: preserve-3d; transform-origin: center center -28.87px; transition: 5s; } #box:hover #div { transform: rotateY(-360deg); } #div span { position: absolute; left: 0; top: 0; width: 100px; height: 100px; font: 50px/100px "宋体"; color: #fff; text-align: center; transform-origin: center center -28.87px; } #div span:nth-of-type(1) { background: #000; transform: rotateY(0deg); } #div span:nth-of-type(2) { background: #6f0; transform: rotateY(120deg); } #div span:nth-of-type(3) { background: #0f6; transform: rotateY(240deg); } </style> </head> <body> <div id="box"> <div id="div"> <span>1</span> <span>2</span> <span>3</span> </div> </div> </body> </html>
代码实现了预期效果,更多内容参阅下面相关文章。
相关阅读:
(1).perspective参阅CSS3 perspective详解一章节。
(2).perspective-origin参阅CSS3 perspective-origin一章节。
(3).transform-style参阅CSS3 transform-style一章节。
(4).transform-origin参阅CSS3 transform-origin一章节。
(5).transition参阅CSS3 transition一章节。
(6).transform参阅CSS3 transform一章节。
(7).:nth-of-type参阅CSS E:nth-of-type(n)伪类选择器一章节。
CSS3多面体旋转效果,这样的场景在实际项目中还是用的比较多的,关于CSS3多面体旋转效果就介绍到这了。