CSS3旋轉球體是一個非常酷炫的效果,在網頁設計中經常會使用到。它可以通過CSS3的transform屬性來實現。在這里,我將向大家介紹如何使用CSS3來創建一個旋轉球體。
/*創建容器*/ .container{ width: 200px; height: 200px; perspective: 1000px; margin: 0 auto; } /*創建球體*/ .ball{ width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: rotate 5s linear infinite; } /*創建球體面*/ .face{ position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: #2ecc71; opacity: 0.7; box-shadow: inset 0 0 50px #27ae60; } /*創建球體面的位置*/ .face:nth-child(1){ transform: rotateY(0deg) translateZ(100px); } .face:nth-child(2){ transform: rotateY(90deg) translateZ(100px); } .face:nth-child(3){ transform: rotateY(180deg) translateZ(100px); } .face:nth-child(4){ transform: rotateY(-90deg) translateZ(100px); } .face:nth-child(5){ transform: rotateX(90deg) translateZ(100px); } .face:nth-child(6){ transform: rotateX(-90deg) translateZ(100px); } /*創建旋轉動畫*/ @keyframes rotate{ from{transform: rotateY(0deg);} to{transform: rotateY(360deg);} }
以上代碼將創建一個寬高為200px的球體容器,并設置了透視距離。接著創建了一個球體,將它的3D效果保留,并在每個球體面上添加了顏色和陰影。最后創建了一個旋轉動畫,不斷地使球體繞Y軸旋轉。
以上就是使用CSS3來創建旋轉球體的全部內容,希望能對你有所幫助。
上一篇css3是用來做什么的
下一篇css 單詞間隔