css3立方體效果程式碼例項
分享一段程式碼例項,它實現了立方體效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { padding: 0; margin: 0; } .div1 { width: 500px; height: 500px; transform-style: preserve-3d; perspective-origin: center center; transform: rotateX(20deg) rotateY(30deg); position: relative; margin: 100px auto; } .div1 div { width: 300px; height: 300px; opacity: 0.8; position: absolute; top: 0; } .div1 div:nth-child(1) { background-color: #089efd; transform: rotateY(90deg) translateZ(150px); } .div1 div:nth-child(2) { background-color: #c1e2b3; transform: translateZ(150px); } .div1 div:nth-child(3) { background-color: #0dc392; transform: rotateY(90deg) translateZ(150px); } .div1 div:nth-child(4) { background-color: #a6e1ec; transform: translateZ(-150px); } .div1 div:nth-child(5) { background-color: #CDEC95; transform: rotateX(90deg) translateZ(150px); } .div1 div:nth-child(6) { background-color: #0dc392; transform: rotateX(-90deg) translateZ(150px); } </style> </head> <body> <div class="div1"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>
相關文章
- CSS3實現的立方體3D滾動效果程式碼例項CSSS33D
- 可以拖動立方體3D效果程式碼例項3D
- three.js 3D立方體效果程式碼例項JS3D
- 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漂浮氣球效果程式碼例項CSSS3
- CSS3 立方體翻轉效果CSSS3
- css立體效果程式碼例項CSS
- CSS3文字凹凸效果程式碼例項CSSS3
- css3實現的折角效果程式碼例項CSSS3
- css3大象行走效果程式碼例項CSSS3
- CSS3文字陰影效果程式碼例項CSSS3
- CSS3 div從左側滑入效果程式碼例項CSSS3
- css3文字鏤空效果程式碼例項CSSS3
- css3實現的打折卡效果程式碼例項CSSS3
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- CSS3文字漸現效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的氣泡效果程式碼例項CSSS3
- css3鋸齒形邊框效果程式碼例項CSSS3
- css3實現的書本立體翻頁效果程式碼例項CSSS3
- css3實現的立體導航選單效果程式碼例項CSSS3