空间转换
目标:使用transform属性实现元素在空间内的位移、旋转、缩放等效果
空间:是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同。
空间转换也叫3D转换
属性:transform
浏览器支持
1.1 空间位移
目标:使用translate实现元素空间位移效果
语法
**transform: translate3d(x, y, z);**
transform: translateX(值);
transform: translateY(值);
**transform: translateZ(值);**
取值(正负均可)
- 像素单位数值
- 百分比
1.2 透视
目标:使用perspective属性实现近大远小效果
思考:生活中,同一个物体,观察距离不同,视觉上有什么区别?
答:近大远小、近清楚远模糊
思考:默认情况下,为什么无法观察到Z轴位移效果?
答:Z轴是视线方向,移动效果应该是距离的远或近, 电脑屏幕是平面,默认无法观察远近效果
透视距离也称为视距,所谓的视距就是透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。
属性(添加给父级)
perspective: 值;
取值:像素单位数值, 数值一般在800 – 1200。
案例,盒子沿着Z轴移动 添加透视的效果
2.1 空间旋转
目标:使用rotate实现元素空间旋转效果
语法
transform: **rotateZ**(值);
transform: **rotateX**(值);
transform: **rotateY**(值);
- X轴旋转示例:
.box {
width: 300px;
margin: 100px auto;
}
img {
width: 300px;
transition: all 2s;
}
.box {
/* 透视效果:近大远小,近实远虚 */
perspective: 1000px;
}
.box img:hover {
transform: rotateX(60deg);
}
<div class="box">
<img src="./images/pic.jpeg" alt="">
</div>
- Y轴旋转示例:
.box {
width: 300px;
margin: 100px auto;
}
img {
width: 300px;
transition: all 2s;
}
.box {
/* 透视效果:近大远小,近实远虚 */
perspective: 1000px;
}
.box img:hover {
transform: rotateY(-60deg);
}
<div class="box">
<img src="./images/pic.jpeg" alt="">
</div>
- Z旋转示例
.box {
width: 300px;
margin: 100px auto;
}
img {
width: 300px;
transition: all 2s;
}
.box img:hover {
transform: rotateZ(360deg);
}
<div class="box">
<img src="./images/pic.jpeg" alt="">
</div>
左手法则
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
拓展 :
rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转