transform 属性不止能实现 2D 转换,也可以制作 3D 立体转换效果,比普通的 x、y 轴组成的平面效果多了一条 z 轴,如下图:
一、透视
电脑显示屏是一个 2D 平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现, 通过透视可以实现此目的。 透视可以将一个 2D 平面,在转换的过程当中,呈现 3D 效果。 透视特点:近大远小。 例如:当我们站在山的脚下看山,山会给我们的视觉效果看起来特别大,当我哦我们站在山的远处观看山,山给我们的视觉效果看起来特别小,这就是所谓的近大远小。注意:并非任何情况下需要透视效果,根据开发需要进行设置,如果需要展示 z 轴的变化, 则设置透视效果。
1.1透视属性 perspective
属性名:perspective
作用:设置在 z 轴的视线焦点的观察位置,从而实现 3D 查看效果。
属性值:像素值,数值越大,观察点距离 z 轴原点越远,图形效果越完整且接近原始尺寸。 注意:透视属性需要设置给 3D 变化元素的父级,而不是透视元素的本身,因为我们要站在父元素的角度进行观看子元素的透视效果。
1.2 3D 旋转
3D旋转比2D旋转更复杂,需要分别对三个方向的旋转角度值:
注意:属性值的角度区分正负,正数表示沿对应坐标轴顺时针方向旋转,负数表示沿对应坐标轴逆时针方向旋转.
3D旋转示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3—3D转换</title>
<style>
body,div,img {
margin: 0;
padding: 0;
}
.box {
width: 450px;
height: 300px;
border: 1px solid #000;
margin: 50px auto;
perspective: 1000px;
}
.box img {
width: 450px;
height: 300px;
transition: all 1s ease 0s;
}
.box:hover img{
/* 我们只能设置一个方向的旋转,如果设置多条transform属性后写的会层叠先写的 */
transform: rotateX(60deg);
transform: rotateY(60deg);
transform: rotateZ(60deg);
}
</style>
</head>
<body>
<div class="box">
<img src="images/1.jpg" alt="">
</div>
</body>
</html>
1.3 3D 位移
类似的,位移也分为三个方向的移动: 属性值:
注意:属性值为像素值或百分比,正负表示位移的方向。正值向对应轴的正方向移动,负值向对应 轴的负方向移动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3—3D转换</title>
<style>
body,div,img {
margin: 0;
padding: 0;
}
.box {
width: 450px;
height: 300px;
border: 1px solid #000;
margin: 150px auto;
perspective: 1000px;
}
.box img {
width: 450px;
height: 300px;
transition: all 1s ease 0s;
}
.box:hover img{
/* 我们只能设置一个方向的位移,如果设置多条transform属性后写的会层叠先写的 */
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
}
</style>
</head>
<body>
<div class="box">
<img src="images/1.jpg" alt="">
</div>
</body>
</html>
1.4 3D转换之位移和转换合并书写
我们的transform属性3D效果也可以同时设置位移和旋转,但是先后书写顺序有差异,多个书写值之间使用空格进行分隔.我们先位移后旋转的视觉效果会变大,而反过来,先旋转后位移它没有办法再向左或者右移动,只能向盒子内部进行移动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3—3D转换</title>
<style>
body,div,img {
margin: 0;
padding: 0;
}
.box {
width: 450px;
height: 300px;
border: 1px solid #000;
margin: 150px auto;
perspective: 1000px;
}
.box img {
width: 450px;
height: 300px;
transition: all 1s ease 0s;
/* 我们的transform属性3D效果也可以同时设置位移和旋转,但是先后书写顺序有差异,多个书写值
之间使用空格进行分隔.我们先位移后旋转的视觉效果会变大,而反过来,先旋转后位移它没有办法
再向左或者右移动,只能向盒子内部进行移动 */
/* transform: translateX(100px) rotateY(60deg); */
transform: rotateY(60deg) translateX(100px);
}
/* .box:hover img{
} */
</style>
</head>
<body>
<div class="box">
<img src="images/1.jpg" alt="">
</div>
</body>
</html>