第八十一節，CSS3變形效果

時間 2019-11-12

標籤第八十一節 css3 css 變形效果欄目 CSS 简体版

原文原文鏈接

CSS3變形效果web

學習要點：
1.transform
2.transform-origin
3.瀏覽器版本瀏覽器

本章主要探討HTML5中CSS3的變形效果，經過變形效果，能夠平移、縮放和旋轉元素的功能。 學習

一．transform
CSS3提供了元素變形效果，也叫作變換。它能夠將元素實現旋轉、縮放和平移的功能。屬性有兩個：transform和transform-origin。測試

屬性說明spa

transform 　　　　　　指定應用的變換功能3d

transform-origin 　　　　指定變換的起點code

transform指定應用的變換功能orm

對於transform的屬性值，具體以下表：blog

屬性值　　　　　　說明it

none 　　　　　　　　　　　　無變換

translate(長度值或百分數值) 在水平方向、垂直方向或兩個方向上平移元素。

translateX(長度值或百分數值)

translatY(長度值或百分數值)

scale(數值) 在水平方向、垂直方向或兩個方向上縮放元素

scaleX(數值)

scaleY(數值)

rotate(角度) 　　　　　　　　　　旋轉元素

skew(角度)　　　　　　　　　　　　　　在水平方向、垂直方向或兩個方向上使元素傾斜必定的角度

skewX(角度)

skewY(角度)

matrix(4~6數值，逗號隔開) 指定自定義變換。

向水平和垂直各移動2 像素，也可使用百分比

p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;
    
    transform: translate(2px, 2px);
}

<p>是一部由北青傳媒股份</p>

向垂直平移2 像素

p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;

    transform: translate(0, 2px);
}

<p>是一部由北青傳媒股份</p>

水平、垂直方向放大1.5倍

p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;

    /*transform: scale(1.5);*/
    transform: scale(1.5,1.5);
}

<p>是一部由北青傳媒股份</p>

水平、垂直方向縮小0.8倍

p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;

    transform: scale(0.8,0.8);
}

<p>是一部由北青傳媒股份</p>

水平方向放大1.5倍

p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;

    transform: scaleX(1.5); 
}

<p>是一部由北青傳媒股份</p>

垂直方向放大1.5倍

p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;

    transform: scaleY(1.5);
}

<p>是一部由北青傳媒股份</p>

旋轉元素， ~ 36 度之間，負值都可

p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;

    transform: rotate(-45deg);
}

<p>是一部由北青傳媒股份</p>

傾斜元素， ~ 36 度之間，負值都可

p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;

    transform: skew(45deg, 20deg);
}

<p>是一部由北青傳媒股份</p>

水平傾斜元素， ~ 36 度之間，負值都可

p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;

    transform: skewX(45deg); 
}

<p>是一部由北青傳媒股份</p>

垂直傾斜元素， ~ 36 度之間，負值都可

p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;

    transform: skewY(45deg);
}

<p>是一部由北青傳媒股份</p>

經過六個數值指定矩形，其內部公式計算較爲複雜，請百度吧

p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;

    transform: matrix(1,0,0,1,30,30);
}

不一樣的值能夠累計，經過空格分割

p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;

    transform: rotate(-45deg) scale(1.5);
}

<p>是一部由北青傳媒股份</p>

二．transform-origin設置變換的起點
transform-origin屬性能夠設置變換的起點。默認狀況下，使用元素的中心做爲起點，具體設置方案參考以下表：

屬性值說明

百分數值　　指定元素x軸或y軸的起點

長度值　　指定距離

left　　　　　　　指定x軸的位置

center

right

top　　　　　　指定y軸的位置

center

bottom

這個屬性是用來改變變形的基準點的，默認是在元素的中心位置，若是你改變了基準點。它就會按照這個基準點進行變形。

默認值，以中心點變形

p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;

    transform-origin: center center;
    transform-origin: 50% 50%;
}

<p>是一部由北青傳媒股份</p>

以左上角爲基準點變形

p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;

    transform-origin: left top;
    transform-origin: 0px 0px;
}

<p>是一部由北青傳媒股份</p>

三．瀏覽器版本

CSS3中的變形效果最低版本和須要前綴版本以下：

　　　　Opera 　　Firefox 　　　　 Chrome 　　　　Safari 　　　　 IE

支持需帶前綴 11.5~22 　　3.5~15 　　　　4 ~ 35 　　　　 3.1 ~ 8 　 9.0+

支持不帶前綴 23+ 　　 16+ 　　 26+ 　　　　無　　　　　 10.0+

兼容完整版

p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg); 
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);

    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -o-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
}

<p>是一部由北青傳媒股份</p>

3D變形效果

學習要點：

1.3D變形簡介

2.transform-style

3.perspective

4.3D變形屬性

本章主要探討HTML5中CSS3的變形效果，主要接着上節課的2D平面變形轉換到3D立體變形。

一．3D變形簡介

以前咱們學習了元素的平移、旋轉、縮放和傾斜等功能。這些效果只是單純在二維平面圖上的，咱們稱之爲2D。那麼其實CSS3也提供了三維立體的一些功能效果，而且目前較新的主流瀏覽器都比較支持，只不過比2D晚一些，對瀏覽器的版本要求也要高一些。因爲3D是立體三維，在x、y軸的基礎上通常會多出一個z軸，深刻躍出軸。如下是3D變形的屬性值表，以下：

屬性值說明

translate3d(x,y,z) 　　　　 3D方式平移元素，設置x、y和z軸

translateZ(z) 　　　　設置3D方式平移元素的z軸

scale3d(x,y,z) 　　　　 3D方式縮放一個元素

scaleZ(z) 　　　　　設置3D方式縮放元素的z軸

rotate3d(x,y,z,a) 　　　　3d方式旋轉元素

rotateX(a)　　　　　　 分別設置3D方式的旋轉元素的x、y和z軸

rotateY(a)

rotateZ(a)

perspective(長度值) 　　設置一個透視投影矩陣

matrix3d(多個值) 　　定義一個矩陣

3D變形比2D變形出來的要晚一些，因此若是須要兼容舊版本瀏覽器，能夠對照這個表,具體以下：

　　　　　　Opera 　　　　Firefox 　　　　Chrome 　 Safari 　　 IE

支持需帶前綴 15 ~ 22 10 ~ 15 12 ~ 35 4 ~ 8 無

支持不帶前綴 23+ 16+ 26+ 無 10.0+

二．transform-style嵌套元素如何在3D空間中呈現，設置父元素

transform-style屬性是指定嵌套元素如何在3D空間中呈現。

屬性值說明

flat 　　　　　　默認值，表示全部子元素在2D平面呈現。

preserve-3d 　　　　表示子元素在3D空間中呈現。

須要再配合後面的功能屬性和變形配置，才能看到效果。一樣，這個屬性也須要加上各類廠商前綴。

在父親元素聲明子元素3d呈現

div{
    transform-style: preserve-3d;
}
p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;
}

<p>是一部由北青傳媒股份</p>

三．perspective 設置查看者的位置，設置父元素
perspective是3D變形的重要屬性，該屬性會設置查看者的位置，並將可視內容映射到一個視錐上，繼而投放到一個2D平面上。

屬性值說明

　 none 　　　　　　默認值，表示無限的角度來看3D物體，但看上去是平的。

長度值　　　　　　　　　接受一個長度單位大於0的值，其單位不能爲百分比。值

　　　　　　　　　　　　　　　　　　 越大，角度出現的越遠，就比如你人離遠一點看物體。值越小，正相反。

設置查看者的距離位置，通常設置在元素的父元素上

看者的距離位置

div{
    transform-style: preserve-3d;
    perspective: 1000px;
}
p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;
}

<p>是一部由北青傳媒股份</p>

須要再配合後面的功能屬性和變形配置，才能看到效果。一樣，這個屬性也須要加上各類廠商前綴。

四．3D變形屬性
咱們運用前面3D功能屬性transform-style和perspective來構建3D變形效果。

translate3d(x,y,z)3D方式平移元素，設置x、y和z軸，設置子元素

div{
    transform-style: preserve-3d;
    perspective: 1000px;
}
p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;
    transform: translate3d(300px,100px,240px); 
}

<p>是一部由北青傳媒股份</p>

scale3d(x,y,z)3D縮放，單獨設置無效，須要配合角度，設置子元素

div{
    transform-style: preserve-3d;
    perspective: 1000px;
}
p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;
    transform: translate3d(300px,100px,240px);
    transform: scale3d(1,1,1.5) rotateX(45deg);
}

<p>是一部由北青傳媒股份</p>

rotate3d(x,y,z,a)設置3D旋轉，a表示角度，xyz是0或1之間的數值，設置子元素

div{
    transform-style: preserve-3d;
    perspective: 1000px;
}
p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;
    transform: translate3d(300px,100px,240px);
    transform: scale3d(1,1,1.5) rotateX(45deg);
    transform: rotate3d(1,0,0,45deg);
}

<p>是一部由北青傳媒股份</p>

CSS3還提供了perspective-origin屬性來設置3D變形中的源點角度。該屬性默認值爲50% 50%也就是center center。

屬性值說明

百分數值　　　　指定元素x軸或y軸的起點

長度值　　　　　指定距離

left　　　　　　　　 指定x軸的位置

center

right

top　　　　　　　　　　 指定y軸的位置

center

bottom

源點設置爲右上方變形

perspective-origin: top right;

CSS3還提供了一個在元素中設置透視的值perspective(長度值)，但它仍是和在父元素設置有必定不一樣。由於父元素整個做爲透視，而元素本身做爲透視，致使不一樣。

具體測試看透視的距離

div{
    transform-style: preserve-3d;
    perspective: 1000px;
}
p{
    width: 200px;
    height: 200px;
    background-color: #37ff20;
    margin: 100px 0 0 100px;
    transform: translate3d(300px,100px,240px);
    transform: scale3d(1,1,1.5) rotateX(45deg);
    transform: rotate3d(1,0,0,45deg);
    transform: perspective(1000px) rotateY(45deg);
}

<p>是一部由北青傳媒股份</p>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。