前言
最近玩了玩用css來構建3D效果，寫了幾個demo，所以部落格總結一下。 在閱讀這篇部落格之前，請先自行瞭解一下css 3D的屬性，例如：transform-style，transform-origin，transform, perspective。
寫一個簡單的立方體
1、我們先用css實現一個長方體，一個長方體有6個邊，我們寫6個li，並用一個ul包裹起來,根據我寫3D動畫的經驗，最好有一個父元素來包裹
<p class="parent"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul></p>
2、先給.parent設定寬高，並且給他設定視距和基點位置。
.parent{ width: 800px; height: 400px; border: 1px solid #000; margin: 0 auto; perspective: 2000px; perspective-origin: -40% -80%; background: #000; }
3、給ul設定寬高以及preserve-3d屬性保留子項目3d轉換，子項目li全部絕對位置
ul{ width: 50px; position: relative; margin: 100px auto; transform-style : preserve-3d; } li{ width: 100px; height: 100px; background: rgba(255, 255, 0, 0.3); position: absolute; text-align: center; border: 3px solid greenyellow; }
效果如所示：
4、先寫一個面，給他的背景設定 background: rgba(255, 255, 0, 0.3);
li:nth-child(1){ background: rgba(255, 255, 0, 0.3); transform: translateY(50px) rotateX(90deg); }
效果如所示：
5、我們寫好了第一個面，然後我們在將其他6個面調整好，變成所示。關於rotate的旋轉方向這裡不解釋，不懂的朋友可以自行查看其他文檔。
/*上面*/ li:nth-child(1){ transform: translateY(-50px) rotateX(90deg); } /*下面*/ li:nth-child(2){ transform: translateY(50px) rotateX(90deg); } /*左面*/ li:nth-child(3){ transform: translateX(-50px) rotateY(90deg); } /*右面*/ li:nth-child(4){ transform: translateX(50px) rotateY(90deg); } /*前面*/ li:nth-child(5){ transform: translateZ(50px); } /*後面*/ li:nth-child(6){ transform: translateZ(-50px); }
效果如所示：
1、代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>書頁2</title> <style> .container{ width: 1000px; height: 650px; background: #000; perspective: 2000px; border: 1px solid transparent; overflow: hidden; margin: 0 auto; perspective-origin: 10% 20%; } .cube{ width: 200px; height: 300px; transform-style: preserve-3d; margin:100px auto; position: relative; transform: rotateX(30deg); border-radius: 50%; padding: 60px; } .mian{ width: 200px; height: 300px; background-image: url(1.jpg); background-position:400px 0; position: absolute; border: 1px solid #ccc; transition: 2s; } /* .mian1:hover{ transform-origin: right; transform: rotateY(-60deg); } */ .mian1{ transform-origin: right; transform: translateX(-200px) rotateY(45deg); background-position: 0 0; } .mian3{ transform-origin: left; transform: translateX(200px) rotateY(45deg); background-position: 200px 0; } .mian3:hover{ transform: translateX(200px) rotateY(0deg); } .mian1:hover{ transform: translateX(-200px) rotateY(0deg); } </style></head><body> <p class="container"> <p class="cube"> <p class="mian mian1"></p> <p class="mian mian2"></p> <p class="mian mian3"></p> </p> </p></body></html>
2、代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>立方體</title> <style> *{ margin: 0; padding: 0; list-style: none; } .parent{ width: 1000px; margin: 0 auto; height: 600px; background: black; perspective: 5000px; perspective-origin: -40% -120%; border: 1px solid #000; } ul{ width: 100px; height: 300px; position: relative; margin:100px auto; transform-style: preserve-3d; animation: zuan 3s linear infinite; border: 1px solid greenyellow; } li{ width: 100px; height: 300px; background: rgba(0, 0, 0, 0.5); position: absolute; text-align: center; line-height: 100px; border: 3px solid greenyellow; } li:nth-child(1){ transform: rotateY(30deg) translateZ(-200px); } li:nth-child(2){ transform: rotateY(60deg) translateZ(-200px); background: rgba(255, 0, 0, 0.5); } li:nth-child(3){ transform: rotateY(90deg) translateZ(-200px); } li:nth-child(4){ transform: rotateY(120deg) translateZ(-200px); background: rgba(0, 0, 255, 0.5); } li:nth-child(5){ transform: rotateY(150deg) translateZ(-200px); } li:nth-child(6){ transform: rotateY(180deg) translateZ(-200px); background: rgba(255, 0, 255, 0.5); } li:nth-child(7){ transform: rotateY(210deg) translateZ(-200px); } li:nth-child(8){ transform: rotateY(240deg) translateZ(-200px); background: rgba(0, 255, 0, 0.5); } li:nth-child(9){ transform: rotateY(270deg) translateZ(-200px); } li:nth-child(10){ transform: rotateY(300deg) translateZ(-200px); background: rgba(0, 255, 255, 0.5); } li:nth-child(11){ transform: rotateY(330deg) translateZ(-200px); } li:nth-child(12){ transform: rotateY(360deg) translateZ(-200px); background: rgba(255, 255, 255, 0.5); } @keyframes zuan{ 0%{ transform: rotateY(0deg); } 100%{ transform: rotateY(360deg); } } </style></head><body> <p class="parent"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </p> </body></html>
效果如：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
