CSS3多面體旋轉效果
分享一段程式碼例項,它實現了滑鼠懸浮多面體旋轉效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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 旋轉魔方效果CSSS3
- css3實現的立方體旋轉效果CSSS3
- CSS3多面體3D運動效果CSSS33D
- CSS3圖片旋轉效果CSSS3
- CSS3星系旋轉效果代CSSS3
- CSS3立方體3D旋轉效果CSSS33D
- CSS3旋轉載入等待效果CSSS3
- CSS3 圓環內部旋轉效果CSSS3
- CSS3地月星系旋轉效果CSSS3
- css3實現的3D立體旋轉效果CSSS33D
- css3實現的立方體3D旋轉效果CSSS33D
- CSS3滑鼠懸浮div旋轉效果CSSS3
- css3實現環狀旋轉效果CSSS3
- CSS3旋轉風車效果程式碼CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- CSS3 3d旋轉魔方效果CSSS33D
- CSS3 太陽系星球旋轉效果CSSS3
- CSS3旋轉大風車效果詳解CSSS3
- CSS3扇形旋轉效果詳解CSSS3
- css3實現的旋轉的陀螺效果CSSS3
- css3點狀旋轉載入等待效果CSSS3
- CSS3邊框旋轉動畫實現效果CSSS3動畫
- CSS3圓形旋轉變大動畫效果CSSS3動畫
- CSS3花瓣狀360度不停旋轉效果CSSS3
- 簡單的css3頭像旋轉與3D旋轉效果CSSS33D
- css3實現動態摺疊生成立方體旋轉效果CSSS3
- CSS3 螺旋旋轉黑白相間條紋效果CSSS3
- CSS3實現的3D旋轉效果CSSS33D
- css3實現的旋轉載入等待效果CSSS3
- css3實現旋轉loadding載入效果CSSS3
- jQuery和css3實現的摩天輪旋轉效果jQueryCSSS3
- js和css3實現360旋轉滾動效果JSCSSS3
- CSS3實現的小球旋轉載入等待效果CSSS3
- css3實現的旋轉魔方效果程式碼例項CSSS3
- css3實現的loadding旋轉載入效果CSSS3
- CSS3 立方體翻轉效果CSSS3
- 卡片旋轉動畫效果動畫
- CSS3實現的div元素旋轉一定角度效果CSSS3