CSS之2D轉換模組

參考w3手冊

transform 屬性向元素應用從2d 或3d轉換。該屬性允許我們對元素進行旋轉、縮放、移動或者傾斜。

預設情況下所有元素都是圍繞z軸進行旋轉，如果想圍繞哪個軸旋轉，那麼只需要在rotate後面加上哪個軸即可。如：

transform: rotatez(45deg);

transform: rotatex(45deg);
transform: rotatey(45deg);

2d轉換元素能夠改變元素的x和y軸。3d轉換元素還能改變其z軸

預設情況下所有的元素都是以自己的中心點作為參考來旋轉的, 我們可以通過形變中心點屬性來修改它的參考點

perspective 屬性定義3d元素距檢視的距離，以畫素計，該屬性允許改變3d元素檢視3d元素的檢視

當為元素定義perspective屬性時，其子元素會獲得透視效果，而不是元素本身

2d模組轉換撲克練習

doctype html

>
<
html 
lang
="zh-cn"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>2d模組轉換撲克練習
title
>
<
style
>
*div
div img
div:hover img
style
>
head
>
<
body
>
<
div>
<
img 
src="img/pk.png"
alt=""
>
div>
body
>
html
>

doctype html

>
<
html 
lang
="zh-cn"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>2d轉換模組-**牆
CSS之 基礎的2D轉換模組
2d轉換需要用到 transform屬性。transform本身就是改變的意思，所以2d轉換可以實現一些轉換，比如 旋轉 rotate 平移 translate 縮放 scale 等 分割線 旋轉的格式 transform rotate 45deg 旋轉45度，deg是單位。平移的格式 transf...
CSS3中2D轉換之位移
css3中2d轉換之位移 css3中移動盒子位置的方法有 定位 改變盒子的外邊距 2d轉換移動。接下來，我們學習2d轉換中位移的方法。首先，我們給出兩個div盒子作為研究物件，舉例 如下 我們分別給兩個盒子設定性質，同時用不同的顏色進行區分，如下 div first child div last c...
2D轉換之移動translate
4.2 2d轉換之移動translate 2d移動是2d轉換裡面的一種功能,可以改變元素在頁面中的位置,類似定位 1.語法 transform translate x,y transform translatex n transform translatey n 2.重點 定義2d轉換中的移動,沿著...