CSS3實現的立方體3D滾動效果程式碼例項
本章節分享一段程式碼例項,它實現了立方體3D旋轉效果。
體現了CSS3的強大功能,需要的朋友可以做一下參考,程式碼非常的簡單。
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <style> @-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(360deg); } } @-ms-keyframes spin { from { ms-transform: rotateY(0); } to { ms-transform: rotateY(360deg); } } @keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } @-webkit-keyframes spin-vertical { from { -webkit-transform: rotateX(0); } to { -webkit-transform: rotateX(-360deg); } } @-ms-keyframes spin-vertical { from { ms-transform: rotateX(0); } to { ms-transform: rotateX(-360deg); } } @keyframes spin-vertical { from { transform: rotateX(0); } to { transform: rotateX(-360deg); } } .cube-wrap { -webkit-perspective: 800px; -webkit-perspective-origin: 50% 100px; -moz-perspective: 800px; -moz-perspective-origin: 50% 100px; -ms-perspective: 800px; -ms-perspective-origin: 50% 100px; perspective: 800px; perspective-origin: 50% 100px; } .cube { position: relative; width: 200px; margin: 0 auto; -webkit-transform-style: preserve-3d; -webkit-animation: spin 5s infinite linear; -moz-transform-style: preserve-3d; -moz-animation: spin 5s infinite linear; -ms-transform-style: preserve-3d; -ms-animation: spin 5s infinite linear; transform-style: preserve-3d; animation: spin 5s 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); font-size: 20px; text-align: center; line-height: 200px; color: rgba(0,0,0,0.5); font-family: sans-serif; text-transform: uppercase; } /*************** DEPTH CUBE ***************/ .depth div.back-pane { -webkit-transform: translateZ(-100px) rotateY(180deg); -moz-transform: translateZ(-100px) rotateY(180deg); -ms-transform: translateZ(-100px) rotateY(180deg); transform: translateZ(-100px) rotateY(180deg); } .depth div.right-pane { -webkit-transform:rotateY(-270deg) translateX(100px); -webkit-transform-origin: top right; -moz-transform:rotateY(-270deg) translateX(100px); -moz-transform-origin: top right; -ms-transform:rotateY(-270deg) translateX(100px); -ms-transform-origin: top right; transform:rotateY(-270deg) translateX(100px); transform-origin: top right; } .depth div.left-pane { -webkit-transform:rotateY(270deg) translateX(-100px); -webkit-transform-origin: center left; -moz-transform:rotateY(270deg) translateX(-100px); -moz-transform-origin: center left; -ms-transform:rotateY(270deg) translateX(-100px); -ms-transform-origin: center left; transform:rotateY(270deg) translateX(-100px); transform-origin: center left; } .depth div.top-pane { -webkit-transform:rotateX(-90deg) translateY(-100px); -webkit-transform-origin: top center; -moz-transform:rotateX(-90deg) translateY(-100px); -moz-transform-origin: top center; -ms-transform:rotateX(-90deg) translateY(-100px); -ms-transform-origin: top center; transform:rotateX(-90deg) translateY(-100px); transform-origin: top center; } .depth div.bottom-pane { -webkit-transform:rotateX(90deg) translateY(100px); -webkit-transform-origin: bottom center; -moz-transform:rotateX(90deg) translateY(100px); -moz-transform-origin: bottom center; -ms-transform:rotateX(90deg) translateY(100px); -ms-transform-origin: bottom center; transform:rotateX(90deg) translateY(100px); transform-origin: bottom center; } .depth div.front-pane { -webkit-transform: translateZ(100px); -moz-transform: translateZ(100px); -ms-transform: translateZ(100px); transform: translateZ(100px); } /*************** VERTICAL SPINNING CUBE ***************/ .cube-wrap.vertical .cube { -webkit-transform-origin: 0 100px; -moz-transform-origin: 0 100px; -ms-transform-origin: 0 100px; transform-origin: 0 100px; -webkit-animation: spin-vertical 5s infinite linear; -moz-animation: spin-vertical 5s infinite linear; -ms-animation: spin-vertical 5s infinite linear; animation: spin-vertical 5s infinite linear; } .cube-wrap.vertical .depth div.top-pane { -webkit-transform:rotateX(-270deg) translateY(-100px); -moz-transform:rotateX(-270deg) translateY(-100px); -ms-transform:rotateX(-270deg) translateY(-100px); transform:rotateX(-270deg) translateY(-100px); } .cube-wrap.vertical .depth div.back-pane { -webkit-transform: translateZ(-100px) rotateX(180deg); -moz-transform: translateZ(-100px) rotateX(180deg); -ms-transform: translateZ(-100px) rotateX(180deg); transform: translateZ(-100px) rotateX(180deg); } .cube-wrap.vertical .depth div.bottom-pane { -webkit-transform: rotateX(-90deg) translateY(100px); -moz-transform: rotateX(-90deg) translateY(100px); -ms-transform: rotateX(-90deg) translateY(100px); transform: rotateX(-90deg) translateY(100px); } /*************** FLAT SPINNING CUBE ***************/ .cube-wrap.flat { -webkit-perspective: none; -webkit-perspective-origin: 0 0; -moz-perspective: none; -moz-perspective-origin: 0 0; -ms-perspective: none; -ms-perspective-origin: 0 0; perspective: none; perspective-origin: 0 0; } </style> <div style="height: 300px; margin-top: 45px; float:left; width:400px;"> <div class="cube-wrap"> <div class="cube depth"> <div class="front-pane">前</div> <div class="back-pane">後</div> <div class="top-pane">上</div> <div class="bottom-pane">bottom</div> <div class="left-pane">左</div> <div class="right-pane">右</div> </div> </div> </div> <div style="height: 300px; margin-top: 60px;float:left;width:400px;"> <div class="cube-wrap vertical"> <div class="cube depth"> <div class="front-pane">前</div> <div class="back-pane">後</div> <div class="top-pane">上</div> <div class="bottom-pane">bottom</div> <div class="left-pane">左</div> <div class="right-pane">右</div> </div> </div> </div> <div style="height: 300px; margin-top: 60px;float:left;width:400px;"> <div class="cube-wrap flat"> <div class="cube depth"> <div class="front-pane">前</div> <div class="back-pane">後</div> <div class="top-pane">上</div> <div class="bottom-pane">bottom</div> <div class="left-pane">左</div> <div class="right-pane">右</div> </div> </div> </div> </body> </html>
上面的程式碼實現了旋轉功能,這裡就不多分析了,感覺也沒法分析,更多內容可以參閱相關閱讀。
相關閱讀:
(1).keyframes可以參閱CSS3 @keyframes一章節。
(2).transform屬性可以參閱CSS3 transform一章節。
(3).perspective屬性可以參閱CSS3 perspective一章節。
相關文章
- 可以拖動立方體3D效果程式碼例項3D
- css3立方體效果程式碼例項CSSS3
- three.js 3D立方體效果程式碼例項JS3D
- js和css3實現的圖片立體滾動切換效果程式碼例項JSCSSS3
- css3實現的立方體3D旋轉效果CSSS33D
- css3實現的動態大白效果程式碼例項CSSS3
- javascript模擬實現滾動條效果程式碼例項JavaScript
- css3實現的折角效果程式碼例項CSSS3
- 拖動滾動條實現div跟隨效果程式碼例項
- css3實現的動物頭像效果程式碼例項CSSS3
- css3實現的皮球上下彈動效果程式碼例項CSSS3
- css3實現網狀球體效果程式碼例項CSSS3
- 美化滾動條效果程式碼例項
- css3實現的立體滾動效果CSSS3
- css3實現的打折卡效果程式碼例項CSSS3
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的氣泡效果程式碼例項CSSS3
- css3實現的立方體旋轉效果CSSS3
- css3晃動效果程式碼例項CSSS3
- css3實現的文字下滑出現效果程式碼例項CSSS3
- css3實現的書本立體翻頁效果程式碼例項CSSS3
- css3實現的立體導航選單效果程式碼例項CSSS3
- css3實現的斑馬紋效果程式碼例項CSSS3
- CSS3實現的div圓角效果程式碼例項CSSS3
- CSS3實現的div陰影效果程式碼例項CSSS3
- css3實現的旋轉魔方效果程式碼例項CSSS3
- css3實現的文字陰影效果程式碼例項CSSS3
- css3實現的多啦a夢效果程式碼例項CSSS3
- CSS3實現的3D旋轉程式碼例項CSSS33D
- js實現的文字垂直滾動例項程式碼JS
- CSS3星系運動效果程式碼例項CSSS3
- jQuery和css3實現的開關效果程式碼例項jQueryCSSS3
- css3實現的邊框陰影效果程式碼例項CSSS3
- css3實現button按鈕美化效果程式碼例項CSSS3
- css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項CSSS3