使用 html css 和 javascript 的圖像輪播旋轉幻覺

程式碼

<title>旋轉影像輪播</title>

    身體 {
        顯示：柔性；
        調整內容：居中；
        對齊項目：居中；
        高度：100vh；
        保證金：0；
        背景顏色：#0d0d0d；
        溢出：隱藏；
        過渡：背景影像 0.5 秒緩和；
        背景大小：封面；
        背景位置：中心；

    }

    /* 輪播容器 */
    .輪播{
        位置：相對；
        寬度：130px；
        高度：130像素；
        變換風格：保留 3d；
        視角：1000px；
        過渡：變換1s；
    }

    /* 圖像樣式 */
    .carousel img {
        位置：絕對；
        高度：100%；
        寬度：100%；
        /* 寬度: 150px;
        高度：150px； */
        邊框半徑：10px；
        盒子陰影: 0 0 10px rgba(255, 110, 199, 0.3);
        變換原點：中心；
        過渡：變換0.5s，過濾0.5s；
        不透明度：0.8；
    }

    /* 圍繞 Y 軸定位每個影像 */
    .carousel img：nth-​​child（1）{ 變換：rotateY（0deg）translateZ（150px）; }
    .carousel img：nth-​​child（2）{ 變換：rotateY（72deg）translateZ（150px）; }
    .carousel img：nth-​​child（3）{ 變換：rotateY（144deg）translateZ（150px）; }
    .carousel img：nth-​​child（4）{ 變換：rotateY（216deg）translateZ（150px）; }
    .carousel img：nth-​​child（5）{ 變換：rotateY（288deg）translateZ（150px）; }

    /* 控制圖示 */
    .controls {
        位置：絕對；
        底部：20px；
        左：20 像素；
        顯示：柔性；
        間隙：10px；
    }
    .controls按鈕{
        寬度：40px；
        高度：40px；
        字體大小：18px；
        邊框：無；
        背景顏色：#181616；
        顏色：#fff；
        遊標：指針；
        邊界半徑：50%；
        過渡：背景色0.3s；
    }
    .controls按鈕：懸停{
        背景顏色：#555；
    }
風格>
頭>


<div>




          </div>

            
        

以上是使用 html css 和 javascript 的圖像輪播旋轉幻覺的詳細內容。更多資訊請關注PHP中文網其他相關文章！