CSS3旋轉鞋架安裝教程

旋轉鞋架是鞋柜中的一款便捷工具，它可以方便用戶挑選鞋子，還可以節約空間。在這里向大家介紹一下如何使用CSS3制作一個旋轉鞋架并將其添加到網頁中。首先我們需要了解一下CSS3中的關鍵技術——CSS變形和CSS過渡動畫。

1、CSS變形

transform: rotate(90deg);//將元素順時針旋轉90度
transform-origin: center center;//設置旋轉中心點為元素中心

2、CSS過渡動畫

transition: all 0.3s linear;//設置過渡動畫為線性變化，時間為0.3秒

3、HTML結構

<div class="shoe-rack">
<div class="shoe"></div>
<div class="shoe"></div>
<div class="shoe"></div>
<div class="shoe"></div>
<div class="shoe"></div>
<div class="shoe"></div>
</div>

4、CSS樣式

.shoe-rack{ 
width: 300px;
height: 300px; 
margin: 50px auto;
position: relative;
transform-style: preserve-3d;
}
.shoe{ 
width: 200px;
height: 200px;
position: absolute;
left: 50px;
top: 50px;
background-color: #ccc;
transform-origin: center center;
transition: all 0.3s linear; 
}
.shoe:nth-child(1){ transform: rotateY(60deg); }
.shoe:nth-child(2){ transform: rotateY(120deg); }
.shoe:nth-child(3){ transform: rotateY(180deg); }
.shoe:nth-child(4){ transform: rotateY(240deg); }
.shoe:nth-child(5){ transform: rotateY(300deg); }
.shoe:nth-child(6){ transform: rotateY(0); }
.shoe:hover{ transform: rotateX(45deg) scale(1.5); }

5、代碼解釋

（1）.shoe-rack設置為相對定位，使其內部元素可以以此為相對父級進行定位；

（2）.shoe設置為絕對定位，左右下邊距均為50px，background-color為灰色；

（3）使用偽類:nth-child(n)為每個shoe添加旋轉角度，其中第一個shoe旋轉60度，第二個旋轉120度……第六個旋轉0度；

（4）當鼠標懸浮在shoe上時，通過transform:rotateX()旋轉45度并通過transform:scale()將其放大1.5倍；

6、用于學習交流使用，如有問題可以私信提問。