CSS3 - 3D位移
2019-03-22 本文已影响0人
Hyso
使用3D位移时，需给要表现出3D效果元素的父元素增加透视效果样式，实现近大远小：
<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)
- 参数说明：
x：设置元素沿 x 轴水平移动，x 为正数时水平向右，x 为负数时水平向左
y：设置元素沿 y 轴垂直移动，y 为正数时垂直向下，y 为负数时垂直向上
z：设置元素沿 z 轴垂直移动，z 为正数时由远及近（视觉上放大），z 为负数时由近及远（视觉上缩小） - 实例：
<!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>
运行结果：
旋转元素
// 元素围绕 x 轴、y 轴、z 轴旋转
transform: rotate3d(x, y, z, angle)
// 元素围绕 x 轴旋转
transform: rotateX(angle) <=> transform: rotate3d(1, 0, 0, angle)
// 元素围绕 y 轴旋转
transform: rotateY(angle) <=> transform: rotate3d(0, 1, 0, angle)
// 元素围绕 z 轴旋转
transform: rotateZ(angle) <=> transform: rotate3d(0, 0, 1, angle)
- 参数说明：
angle：设置元素旋转的角度，正数代表顺时针旋转，负数代表逆时针旋转。 - 实例：
<!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>
运行结果：
缩放/扩大元素
// 沿 x 轴、y 轴、z轴缩放/扩大元素
transform: scale3d(x, y, z)
// 沿 x 轴缩放/扩大元素
transform: scaleX(x)
// 沿 y 轴缩放/扩大元素
transform: scaleY(y)
// 沿 z轴缩放/扩大元素
transform: scaleZ(z)
-注意：
scaleZ和scale3d函数单独使用时，z 轴的效果无法显示，需与其他变形函数一起使用才行，且需写在其他变形函数之前。
- 参数说明：
x：设置元素沿 x 轴缩放/扩大的倍数，x 小于1时为缩放，大于1时为扩大。
y：设置元素沿 y 轴缩放/扩大的倍数，y 小于1时为缩放，大于1时为扩大。
z：设置元素沿 z 轴缩放/扩大的倍数，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>
运行结果：
