使用3D位移時，需給要表現(xiàn)出3D效果元素的父元素增加透視效果樣式，實現(xiàn)近大遠?。?/p>
<style type="text/css">
.parent {
perspective: 1000px;
transform-style: preserve-3d;
}
</style>
3D移動
// 沿 x 軸、 y 軸和 z 軸移動
transform:translate3d(x,y,z)
// 沿 x 軸移動
transform:translateX(x)
// 沿 y 軸移動
transform:translateY(y)
// 沿 z 軸移動
transform:translateZ(z)
- 參數(shù)說明：
x：設(shè)置元素沿 x 軸水平移動，x 為正數(shù)時水平向右，x 為負數(shù)時水平向左
y：設(shè)置元素沿 y 軸垂直移動，y 為正數(shù)時垂直向下，y 為負數(shù)時垂直向上
z：設(shè)置元素沿 z 軸垂直移動，z 為正數(shù)時由遠及近（視覺上放大），z 為負數(shù)時由近及遠（視覺上縮?。?/li> - 實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 600px;
height: 600px;
position: relative;
float: left;
border: 1px solid #EE3030;
perspective: 1000px;
transform-style: preserve-3d;
}
.box1, .box2 {
width: 200px;
height: 200px;
color: #FFFFFF;
font-size: 20px;
text-align: center;
line-height: 200px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
.box2 {
transform: translate3d(250px, 250px, 200px);
}
</style>
</style>
</head>
<body>
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
</body>
</html>
運行結(jié)果：
旋轉(zhuǎn)元素
// 元素圍繞 x 軸、y 軸、z 軸旋轉(zhuǎn)
transform: rotate3d(x, y, z, angle)
// 元素圍繞 x 軸旋轉(zhuǎn)
transform: rotateX(angle) <=> transform: rotate3d(1, 0, 0, angle)
// 元素圍繞 y 軸旋轉(zhuǎn)
transform: rotateY(angle) <=> transform: rotate3d(0, 1, 0, angle)
// 元素圍繞 z 軸旋轉(zhuǎn)
transform: rotateZ(angle) <=> transform: rotate3d(0, 0, 1, angle)
- 參數(shù)說明：
angle：設(shè)置元素旋轉(zhuǎn)的角度，正數(shù)代表順時針旋轉(zhuǎn)，負數(shù)代表逆時針旋轉(zhuǎn)。 - 實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 600px;
height: 600px;
position: relative;
float: left;
border: 1px solid #EE3030;
perspective: 1000px;
transform-style: preserve-3d;
}
.box1, .box2 {
width: 200px;
height: 200px;
color: #FFFFFF;
font-size: 20px;
text-align: center;
line-height: 200px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
.box2 {
transform: translate3d(250px, 250px, 50px) rotate3d(1, 1, 1, 60deg);
}
</style>
</style>
</head>
<body>
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
</body>
</html>
運行結(jié)果：
縮放/擴大元素
// 沿 x 軸、y 軸、z軸縮放/擴大元素
transform: scale3d(x, y, z)
// 沿 x 軸縮放/擴大元素
transform: scaleX(x)
// 沿 y 軸縮放/擴大元素
transform: scaleY(y)
// 沿 z軸縮放/擴大元素
transform: scaleZ(z)
-注意：
scaleZ和scale3d函數(shù)單獨使用時，z 軸的效果無法顯示，需與其他變形函數(shù)一起使用才行，且需寫在其他變形函數(shù)之前。
- 參數(shù)說明：
x：設(shè)置元素沿 x 軸縮放/擴大的倍數(shù)，x 小于1時為縮放，大于1時為擴大。
y：設(shè)置元素沿 y 軸縮放/擴大的倍數(shù)，y 小于1時為縮放，大于1時為擴大。
z：設(shè)置元素沿 z 軸縮放/擴大的倍數(shù)，z 小于1時為縮放，大于1時為擴大。 - 實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 600px;
height: 600px;
position: relative;
float: left;
border: 1px solid #EE3030;
perspective: 1000px;
transform-style: preserve-3d;
}
.box1, .box2 {
width: 200px;
height: 200px;
color: #FFFFFF;
font-size: 20px;
text-align: center;
line-height: 200px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
.box2 {
transform: translate3d(250px, 250px, 50px) scale3d(0.5, 0.5, 5) rotateX(45deg) ;
}
</style>
</style>
</head>
<body>
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
</body>
</html>
運行結(jié)果：
