外观
平面转换
约 1038 字大约 3 分钟
2024-10-02
作用: 为元素添加动态效果, 一般与过渡配合使用.
概念: 改变盒子在平面内的形态(位移, 旋转, 缩放, 倾斜).
平面转换又叫2D转换
属性名: transform.
例子:
HTML
<img src="https://elake-halo.oss-cn-shanghai.aliyuncs.com/748142AF-AFD0-4C1E-B642-06859DB7949F.png" alt="img">CSS
img{
width: 300px;
height: 300px;
transition: all 0.5s;
}
img:hover{
transform: translate(200px) rotate(360deg) scale(2);
}平移
transform: translate(X轴移动距离, Y轴移动距离);
如果想单独设置XY轴, 可以使用以下属性值.
transform: translateX(X轴移动距离);
transform: translateY(Y轴移动距离);
例子:
HTML
<img src="https://elake-halo.oss-cn-shanghai.aliyuncs.com/748142AF-AFD0-4C1E-B642-06859DB7949F.png" alt="img">CSS
img{
width: 300px;
height: 300px;
transition: all 0.5s;
}
img:hover{
transform: translate(200px, 200px);
}旋转
transform: rotate(旋转角度);
如果想单独设置XY轴, 可以使用以下属性值.
transform: rotateX(旋转角度);
transform: rotateY(旋转角度);
单位: deg.
正数顺时针, 负数逆时针.
例子:
HTML
<img src="https://elake-halo.oss-cn-shanghai.aliyuncs.com/748142AF-AFD0-4C1E-B642-06859DB7949F.png" alt="img">CSS
img{
width: 300px;
height: 300px;
transition: all 0.5s;
}
img:hover{
transform: rotate(360deg);
}改变转换原点
默认情况下, 转换原点是盒子中心点.
transform-origin: 水平原点位置 垂直原点位置;
属性值:
- 方位名:
left,top,right,bottom,center. - 数值.
- 百分比.
例子:
HTML
<img src="https://elake-halo.oss-cn-shanghai.aliyuncs.com/748142AF-AFD0-4C1E-B642-06859DB7949F.png" alt="img">CSS
img{
width: 300px;
height: 300px;
transition: all 0.5s;
}
img:hover{
transform-origin: right bottom;
transform: rotate(180deg);
}多重转换
transform: 动态效果1 动态效果2;
每个动态效果用空格分割.
例如先平移在旋转:
transform: translate() rotate();
缩放
transform: scale(缩放倍率);
transform: scale(X轴缩放倍率, Y轴缩放倍率);
通常, 只为scale设置一个值, 表示X轴和Y轴等比例缩放.
取值大于1为放大, 小于1为缩小.
例子:
HTML
<img src="https://elake-halo.oss-cn-shanghai.aliyuncs.com/748142AF-AFD0-4C1E-B642-06859DB7949F.png" alt="img">CSS
img{
width: 300px;
height: 300px;
transition: all 0.5s;
}
img:hover{
transform: scale(2, 0.8);
}倾斜
transform: skew(倾斜角度);
单位: deg.
例子:
HTML
<img src="https://elake-halo.oss-cn-shanghai.aliyuncs.com/748142AF-AFD0-4C1E-B642-06859DB7949F.png" alt="img">CSS
img{
width: 300px;
height: 300px;
transition: all 0.5s;
}
img:hover{
transform: skew(30deg);
}空间转换
空间:是从坐标轴角度定义的X, Y, Z三条坐标轴构成了一个立体空间, Z轴位置与视线方向相同.
空间转换也叫3D转换.
3D平移
transform: translate3d(X轴移动距离, Y轴移动距离, Z轴移动距离);
如果想单独设置XYZ轴, 可以使用以下属性值.
transform: translateX(X轴移动距离);
transform: translateY(Y轴移动距离);
transform: translateZ(Z轴移动距离);
例子:
HTML
<img src="https://elake-halo.oss-cn-shanghai.aliyuncs.com/748142AF-AFD0-4C1E-B642-06859DB7949F.png" alt="img">CSS
img{
width: 300px;
height: 300px;
transition: all 0.5s;
}
img:hover{
transform: translate3d(200px, 200px, 500px);
}由于电脑是平面的, 默认状态下无法观察到Z轴的平移效果.
视距
作用: 指定了观察者与Z=0平面的距离, 为元素添加透视效果.
透视效果: 近大远小, 近实远虚.
属性(添加给父级, 建议取值范围800~1200).
perspective: 视距;
例子:
HTML
<div>
<img src="https://elake-halo.oss-cn-shanghai.aliyuncs.com/748142AF-AFD0-4C1E-B642-06859DB7949F.png" alt="img">
</div>CSS
div{
perspective: 1000px;
}
img{
width: 300px;
height: 300px;
transition: all 0.5s;
}
img:hover{
transform: translateZ(-200px);
}3D旋转
transform: rotate3d(X, Y, Z, 旋转角度);
transform: rotateZ(旋转角度);
X, Y, Z取值为0~1之间的数.
单位: deg.
正数顺时针, 负数逆时针.
例子:
HTML
<img src="https://elake-halo.oss-cn-shanghai.aliyuncs.com/748142AF-AFD0-4C1E-B642-06859DB7949F.png" alt="img">CSS
img{
width: 300px;
height: 300px;
transition: all 0.5s;
}
img:hover{
transform: rotateZ(360deg);
}立体呈现
作用: 设置元素的子元素是位于3D空间中还是平面中.
transform-style
属性值:
flat: 子级处于平面中.
preserve-3d: 子级处于3D空间.
3D缩放
transform: scale3d(X轴缩放倍率, Y轴缩放倍率, Z轴缩放倍率);
取值大于1为放大, 小于1为缩小.
版权所有
版权归属：Erhai-lake