CSS3中引入的
2D变化
2D的transform
应用在x和y轴上,而3D的则多了一条z轴。
transform
属性可以让元素实现变形,旋转,缩放等视觉效果。
2. Scale缩放
.box {
transform: rotate(20deg); //顺时针
}
.box2 {
transform: rotate(-20deg); //逆时针
}
.box {
transform: scale(.5); //缩小为原来的一半
}
.box2 {
transform: scale(2); //放大为原来的两倍
}
你也可以只针对宽度或者高度进行缩放操作。
.box {
transform: scaleX(2); //将宽度变为原来的两倍
}
.box2 {
transform: scaleY(.25); //将高度变为原来的25%
}
3. Skew 倾斜
.box {
transform: skewX(-5deg); //X轴顺时针旋转5度
}
.box1 {
transform: skewY(20deg); //Y轴逆时针旋转20度
}
.box3 {
transform: skew(-5deg, 20deg); //同时作用在X和Y轴上
}
4. Translate 平移
.box {
transform: translateX(-10px); //在横轴上向左平移10个像素点
}
.box2 {
transform: translateY(20%); //在Y轴上向下平移其自身高度的20%
}
.box3 {
transform: translate(-10px, 20%); //同时在X轴和Y轴上平移
}
实例动画:
X轴:水平向右,X右边是正值,左边是负值。
Y轴:垂直向下,Y下面是正值,上面是负值。
Z轴:垂直屏幕,往外面是正值,往里面是负值。
通过CSS transf