這篇文章帶給大家的內容是關於css3D 動畫的例子(附完整程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
前言
最近玩了玩用css來建立3D效果,寫了幾個demo,所以部落格總結一下。 在閱讀這篇部落格之前,請先自行了解css 3D的屬性,例如:transform-style,transform-origin,transform, perspective。
寫一個簡單的立方體
1、我們先用css實現一個長方體,一個長方體有6個邊,我們寫6個li,並用一個ul包裹起來,根據我寫3D動畫的經驗,最好有一個父元素來包裹
<p> </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、程式碼如下:
nbsp;html> <meta> <meta> <meta> <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> <p> </p><p> </p><p></p> <p></p> <p></p>
2、程式碼如下:
nbsp;html> <meta> <meta> <meta> <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> <p> </p>
效果如下圖:
相關推薦:
以上是css3D+動畫的範例(附完整程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!