css的transform變換

時間 2019-11-11

標籤 css transform 變換欄目 CSS 简体版

原文原文鏈接

若想看到變換效果，要給圖形的盒子設置過渡 transition: 3scss

1. 位移

語法：transform: translate(x,y);spa

其中x表示水平方向的位移（即左右），y表示垂直方向的位移（即上下）。code

括號內最多隻能有2個值，當只有1個值的時候表示水平位移。orm

值的大小能夠爲正數，也能夠爲負數。當值爲負數的時候向反方向移動。blog

值的單位能夠爲像素（如100px，-100px），也能夠爲百分比（如50%，-50%）。當值用百分比來表示的時候，參照的是元素translate所在盒子的大小。圖片

translate屬性不脫標！同步

2. 旋轉

語法：transform：rotate();it

括號內表示旋轉的角度，必須使用單位deg。io

當括號內的值爲正數時，表示順時針旋轉；爲負數時，表示逆時針旋轉。form

3. 旋轉原點的設置

語法：transform-origin: x y;

x表示水平方向，值能夠設置爲方位值left，center，right；或者像素px；或者百分數%。

y表示垂直方向，值能夠設置爲方位值top，center，bottom；或者像素px；或者百分數%。

當x或y的值爲負數時，旋轉原點在盒子以外。

默認旋轉原點爲所在盒子的中心點：center center。（x和y之間用空格隔開。）

 1 <!-- 當鼠標進入path盒子時，風火輪自動向右轉動；鼠標移出時風火輪復原 -->
 2 <body>
 3      <div class="path"> 
 4         <div class="wheel"> 風火輪 </div> 
 5     </div>
 6 </body>
 7 
 8 <style>
 9 /* 此處省略path及風火輪樣式，設置鼠標進入盒子時的樣式 */
10     .path:hover .wheel {
11         /* translate()中只有一個值，表示水平移動，上下不動 */
12         /* rotate()中設置爲3600度表示轉動十圈 */
13         transform: translate(1000px) rotate(3600deg);
14     }
15 </style>

若是既要發生位移又要發生旋轉，必須在同一個transform內同時設置多個屬性，用空格隔開，不能分開寫成兩個transform。

由於分開寫成兩個後會使樣式發生重疊，展現最後定義的transform。

4. 縮放

語法：transform: scale(x,y);

x表示水平方向（改變圖形的寬度），y表示垂直方向（改變圖形的高度）。當括號內只有一個值的時候，圖形的寬和高同步變換。

括號裏的值爲數字：（值的正負不會影響圖形變換）

值=0時，圖形消失；
0<值<1時，圖形縮小爲原來的幾倍；
值=1時，圖形不變；
值>1時，圖形放大爲原來的幾倍；

5. 傾斜

語法：transform: skew(x,y);

x表示左右傾斜（左邊和右邊），上下兩條邊保持水平（經常使用）。

y表示上下傾斜（上邊和下邊），左右兩條邊保持垂直。只有一個值的時候默認爲左右傾斜。

值的單位爲deg，表示傾斜度數。如60deg。

若是想要盒子內部的某些內容不傾斜，須要單獨設置：給字內容加標籤，而後設置transform: skew()內的值爲負的父標籤的值。

（若是給字內容加的標籤爲行內元素如span，須要用display: block或display: inline-block轉換成塊級元素或行內塊元素。）

傾斜導航欄案例：

 1 <!-- 用圖形傾斜代替添加背景圖片能夠加快加載速度 -->
 2 <body>
 3     <ul>
 4         <li>
 5             <a href="#">
 6                 <span>首頁1</span>
 7             </a>
 8         </li>
 9         <li>
10             <a href="#">
11                 <span>首頁2</span>
12             </a>
13         </li>
14         <li>
15             <a href="#">
16                 <span>首頁3</span>
17             </a>
18         </li>
19         <li>
20             <a href="#">
21                 <span>首頁4</span>
22             </a>
23         </li>
24         <li>
25             <a href="#">
26                 <span>首頁5</span>
27             </a>
28         </li>
29         <li>
30             <a href="#">
31                 <span>首頁6</span>
32             </a>
33         </li>
34     </ul>
35 </body>
36 
37 <style>
38     /* 省略ul和a標籤的css樣式設置 */
39     li {
40         float: left;
41         background: black;
42         margin-right: 20px;
43         transform: skew(-20deg);
44     }
45     li a span {
46         display: block;
47         transform: skew(20deg);
48     }
49 </style>