css3實現的3D立體旋轉效果
分享一段程式碼例項,它實現了3D立體旋轉效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> html{ background:linear-gradient(#000000 0%,#0bb20c 100%); height:100%; } .wrap{ margin-top:250px; perspective: 1000px; } @keyframes tuoluo{ 0%{ transform: rotateY(0deg) rotateX(0deg); } 100%{ transform: rotateY(360deg) rotateX(360deg); } } .wrap .cube{ margin:auto; width:200px; height:200px; position:relative; transform-style:preserve-3d; /*迴圈動畫*/ animation: tuoluo 3s linear infinite; } .cube div{ width: 100%; height: 100%; font-size: 36px; background: rgba(255, 25, 47, 0.5); color: #fff; border: 1px solid #ffffff; text-align: center; line-height: 200px; position: absolute; transition: all .2s ease-in; } .cube span{ display:block; width:50%; height:50%; background:rgba(26, 3, 4, 1); border:1px solid #000000; text-align:center; position:absolute; top:25%; left:25%; } .cube .out-front{ transform: translateZ(100px); } .cube .out-back{ transform: rotateY(180deg) translateZ(100px); } .cube .out-left{ transform: rotateY(270deg) rotateX(0deg) translateZ(100px); } .cube .out-right{ transform: rotateY(90deg) rotateX(0deg) translateZ(100px); } .cube .out-top{ transform: rotateY(0deg) rotateX(90deg) translateZ(100px); } .cube .out-bottom{ transform: rotateY(0deg) rotateX(-90deg) translateZ(100px); } .cube:hover .out-front{ transform: translateZ(200px); } .cube:hover .out-back{ transform: rotateY(180deg) translateZ(200px); } .cube:hover .out-left{ transform: rotateY(270deg) rotateX(0deg) translateZ(200px); } .cube:hover .out-right{ transform: rotateY(90deg) rotateX(0deg) translateZ(200px); } .cube:hover .out-top{ transform: rotateY(0deg) rotateX(90deg) translateZ(200px); } .cube:hover .out-bottom{ transform: rotateY(0deg) rotateX(-90deg) translateZ(200px); } .cube .in-front{ transform: translateZ(50px); } .cube .in-back{ transform: rotateY(180deg) translateZ(50px); } .cube .in-left{ transform: rotateY(270deg) rotateX(0deg) translateZ(50px); } .cube .in-right{ transform: rotateY(90deg) rotateX(0deg) translateZ(50px); } .cube .in-top{ transform: rotateY(0deg) rotateX(90deg) translateZ(50px); } .cube .in-bottom{ transform: rotateY(0deg) rotateX(-90deg) translateZ(50px); } </style> </head> <body> <div class="wrap"> <div class="cube"> <div class="out-front">前</div> <div class="out-back">後</div> <div class="out-left">左</div> <div class="out-right">右</div> <div class="out-top">上</div> <div class="out-bottom">下</div> <span class="in-front"></span> <span class="in-back"></span> <span class="in-left"></span> <span class="in-right"></span> <span class="in-top"></span> <span class="in-bottom"></span> </div> </div> </body> </html>
相關文章
- CSS3立方體3D旋轉效果CSSS33D
- 簡單的css3頭像旋轉與3D旋轉效果CSSS33D
- CSS3多面體旋轉效果CSSS3
- 直播軟體原始碼,CSS3實現圖片立體旋轉動畫原始碼CSSS3動畫
- css3帶你實現3D轉換效果CSSS33D
- CSS3星系旋轉效果代CSSS3
- CSS3圖片旋轉效果CSSS3
- CSS3旋轉載入等待效果CSSS3
- CSS3地月星系旋轉效果CSSS3
- CSS3實現3D魔方效果CSSS33D
- CSS3實現3D翻牌效果CSSS33D
- CSS3旋轉風車效果程式碼CSSS3
- CSS3滑鼠懸浮div旋轉效果CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- 使用css3做一個魔方旋轉的效果CSSS3
- CSS3實現3d效果照片牆CSSS33D
- 滑鼠懸浮div實現旋轉效果
- CSS3具有3D立體效果的數字分頁CSSS33D
- CSS3旋轉大風車效果詳解CSSS3
- css3實現橢圓軌跡旋轉CSSS3
- 滑鼠懸浮實現環形旋轉效果
- HTML+CSS實現太極旋轉效果HTMLCSS
- CSS3 文字立體凸起效果CSSS3
- 手寫一個使用css3旋轉硬幣的效果CSSS3
- css3 3D 深度翻轉效果案例CSSS33D
- CSS3 3D立體按鈕CSSS33D
- CSS3多面體3D運動效果CSSS33D
- CSS3動畫實現3D倒數計時效果CSSS3動畫3D
- CSS3簡單圓角立體按鈕效果CSSS3
- ARFoundation - 實現物體旋轉, 平移,縮放
- 卡片旋轉動畫效果動畫
- 影像旋轉的FPGA實現(一)FPGA
- CSS3動畫(360度旋轉、旋轉放大、放大、移動)CSSS3動畫
- 陰影進階,實現更加的立體的陰影效果!
- 如何用3D流體實現逼真水流效果?3D
- CSS3翻轉效果CSSS3
- 超級炫酷的3D旋轉動態圖——Python程式碼實現3DPython
- CSS3實現多樣的邊框效果CSSS3
- CSS3實現多種背景效果CSSS3