1.2 縮放

語法transform : scale(x,y);

-webkit-transform : scale(x,y);

根據(jù)倍數(shù)來縮放，取決于寬度(X軸)和高度(Y軸)的參數(shù)；也可以用一個參數(shù)，表示X軸和Y軸都按此倍數(shù)縮放

1.3 旋轉(zhuǎn)

語法transform : rotate(deg);

-webkit-transform : rotate(deg)

單位：deg(度)

正值表示順時針，負值表示逆時針 (如果不懂順時針是哪個方向，請看看鐘表走的方向就是順時針)

1.4 傾斜

語法transform : skew( x ,y)

-webkit-transform : skew(x,y)

單位：deg

例子：transform:skew(15deg,0);

-webkit-transform:skew(15deg,0);

1.5 矩陣轉(zhuǎn)換

matrix()

語法transform : matrix(n,n,n,n,n,n)

-webkit-transform : matrix(n,n,n,n,n,n)

二、3D轉(zhuǎn)換

CSS3變形中具有X /Y可用的函數(shù)：translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()transform : translateX(x)

transform : translateY(y)

transform : scaleX(x)

transform : scaleY(y)

transform : skew(x)

transform : skew(y)

CSS3 3D變形包括函數(shù)有:rotateX()、rotateY()、rotate3d()、translateZ()、translate3d()、scaleZ()、scale3d()和matrix3d()。transform : rotateX(deg)

transform : rotateY(deg)

transform : rotate3d(x,y,z,angle)

transform : translateZ(z)

transform : translate3d(x,y,z)

transform : scaleZ(z)

transform : scale3d(x,y,z)

transform : matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

因為很多人會搞錯3d旋轉(zhuǎn)，所以在這里，我們重點介紹一下rotate3d(x,y,z,angle)：

rotate3d(x,y,z,angle)共有四個參數(shù)

x、y、z分別對應于X軸、Y軸、Z軸，默認值都為0；而angle就是旋轉(zhuǎn)的角度

如果你要沿著該軸轉(zhuǎn)動那就將該軸的值設(shè)置為1，否則為0；然后在后面的angle中設(shè)置旋轉(zhuǎn)的角度，需要注意的是，angle只有一個角度值。

用法：transform : rotate3d(1,0,0,50deg) //繞著X軸順時針旋轉(zhuǎn)50度

三、其他屬性

transform-origin ?指定元素的中心點transform-style ?規(guī)定被嵌套元素如何在 3D 空間中顯示。當設(shè)置值為preserve-3d值，建立一個3D渲染環(huán)境。

perspective 屬性相對于觀眾產(chǎn)生一個3D場景，你看3D物體，眼睛到畫布的距離。正確的用法是他需要應用到變形元素的祖先元素上。

perspective-origin 為視點的位置。

backface-visibilty 屬性用來設(shè)置背面的可見性。

3.1 transform-origin

指定元素的中心點

默認情況，變形的原點在元素的中心點，或者是元素X軸和Y軸的50%處。

還有一個新增的，transform-origin-z，控制元素三維空間中心點。

語法transform-origin: x-axis y-axis z-axis;

值：

x-axis(left，center，right，length，%)

y-axis(top，center，bottom，length，%)

z-axis(length)

2D的變形中的transform-origin屬性可以是一個參數(shù)值，也可以是兩個參數(shù)值。如果是兩個參數(shù)值時，第一值設(shè)置水平方向X軸的位置，第二個值是用來設(shè)置垂直方向Ｙ軸的位置。

而在3D的變形中的transform-origin屬性還包括了Ｚ軸的第三個值

例子：transform-origin: 50% 50%; //默認值

transform-origin : 50% 0; //也可以設(shè)為 center top

3.2 transform-style

規(guī)定被嵌套元素如何在 3D 空間中顯示。

有兩個值：

flat子元素將不保留其 3D 位置。

preserve-3d子元素將保留其 3D 位置。

當設(shè)置值為preserve-3d值，建立一個3D渲染環(huán)境。

3.3 perspective

屬性相對于觀眾產(chǎn)生一個3D場景，你看3D物體，眼睛到畫布的距離。取值越小，3D效果就越明顯，也就是你的眼睛越靠近真3D。

正確的用法是他需要應用到變形元素的祖先元素上。

屬性值：

number元素距離視圖的距離，以像素計，不能用百分比。

none默認值。與 0 相同。不設(shè)置透視。

定義時的perspective屬性，它是一個元素的子元素，透視圖，而不是元素本身。

注意：

所有主流瀏覽器都不支持perspective屬性。

Safari和Chrome使用私有屬性-webkit-perspective獲得支持。

為了更好的理解，下面我們來看一個例子：

div布局：

123456

CSS樣式：.page {

position: relative;

max-width: 640px;

width: 100%;

height: 100%;

margin: 0 auto;

background: #373737;

}

.cude{

position:absolute;

top:200px;

left:100px;

width: 100px;

-webkit-perspective: 1000px;

perspective: 1000px;

}

.dice {

position: absolute;

width: 100px;

height: 100px;

transform: rotateX(-15deg) rotateY(47deg);

transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

}

.dice .side {

position: absolute;

display: block;

width: 100px;

height: 100px;

background: rgba(14,126,84,.5);

text-align: center;

line-height:100px;

color:#fff;

font-size:40px;

font-weight: bold;

border:1px solid #333;

}

.front{

transform:translateZ(50px);

}

.top{

transform: rotateX(90deg) translateZ(50px);

}

.bottom{

transform: rotateX(-90deg) translateZ(50px);

}

.left{

transform: rotateY(-90deg) translateZ(50px);

}

.right{

transform: rotateY(90deg) translateZ(50px);

}

.back{

transform: rotateY(-180deg) translateZ(50px);

}

通過改變perspective的值，我們可以很明顯的看到效果：

屬性解析：

perspective取值為none或不設(shè)置，就沒有真3D空間。

perspective取值越小，3D效果就越明顯，也就是你的眼睛越靠近真3D。

perspective的值無窮大，或值為0時與取值為none效果一樣。

3.4 perspective-origin

perspective-origin 屬性定義 3D 元素所基于的 X 軸和 Y 軸。該屬性允許您改變 3D 元素的底部位置。

定義時的perspective -origin屬性，它是一個元素的子元素，透視圖，而不是元素本身。

3.5 backface-visibility

屬性值：

visible背面是可見的。

hidden背面是不可見的。

例子：

右邊的div加了backface-visibility:hidden;

樣式：.box{

width:100px;

height:100px;

background:green;

float:left;

transform-style: preserve-3d;

transition:all 1s;

}

.box:hover{

transform:rotateY(180deg);

}

.backface{

backface-visibility:hidden;

}

四、兼容性

Internet Explorer使用私有屬性-ms-Transform-origin支持(僅2D轉(zhuǎn)換)。

Firefox使用私有屬性-MOZ-Transform-origin支持(僅2D轉(zhuǎn)換)。

Opera使用私有屬性-O-Transform-origin支持(僅2D轉(zhuǎn)換)。

Safari和Chrome使用私有屬性-WebKit-Transform-origin支持(3D和2D變換)。

總結(jié)

以上是生活随笔為你收集整理的html52D转换3D,CSS3 Transform 2D和3D转换的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。