html52D转换3D,CSS3 Transform 2D和3D转换
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(度)
正值表示順時針，負(fù)值表示逆時針 (如果不懂順時針是哪個方向，請看看鐘表走的方向就是順時針)
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分別對應(yīng)于X軸、Y軸、Z軸，默認(rèn)值都為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 空間中顯示。當(dāng)設(shè)置值為preserve-3d值，建立一個3D渲染環(huán)境。
perspective 屬性相對于觀眾產(chǎn)生一個3D場景，你看3D物體，眼睛到畫布的距離。正確的用法是他需要應(yīng)用到變形元素的祖先元素上。
perspective-origin 為視點的位置。
backface-visibilty 屬性用來設(shè)置背面的可見性。
3.1 transform-origin
指定元素的中心點
默認(rèn)情況，變形的原點在元素的中心點，或者是元素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%; //默認(rèn)值
transform-origin : 50% 0; //也可以設(shè)為 center top
3.2 transform-style
規(guī)定被嵌套元素如何在 3D 空間中顯示。
有兩個值：
flat子元素將不保留其 3D 位置。
preserve-3d子元素將保留其 3D 位置。
當(dāng)設(shè)置值為preserve-3d值，建立一個3D渲染環(huán)境。
3.3 perspective
屬性相對于觀眾產(chǎn)生一個3D場景，你看3D物體，眼睛到畫布的距離。取值越小，3D效果就越明顯，也就是你的眼睛越靠近真3D。
正確的用法是他需要應(yīng)用到變形元素的祖先元素上。
屬性值：
number元素距離視圖的距離，以像素計，不能用百分比。
none默認(rèn)值。與 0 相同。不設(shè)置透視。
定義時的perspective屬性，它是一個元素的子元素，透視圖，而不是元素本身。
注意：
所有主流瀏覽器都不支持perspective屬性。
Safari和Chrome使用私有屬性-webkit-perspective獲得支持。
為了更好的理解，下面我們來看一個例子：
div布局：
123456CSS樣式：.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)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python变量自加一_Python个人
- 下一篇： php 截取某个字符,PHP_php截取