要理解的一些css属性
1.transform: none | transform-functions;用于将元素缩放(scale),旋转(rotate),移动(translate),扭曲(skew)等
能调用的方法有:
注意: 在3D操作中,本人设的坐标系为垂直屏幕向外方向为z轴,屏幕向上方向为y轴,屏幕向右方向为x轴
值 | 描述 |
---|---|
none | 定义不进行转换 |
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵 |
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换,使用 16 个值的 4x4 矩阵。 |
translate(x,y) | 定义 2D 移动 transform:translate(20px,30px) 是将元素移动到横坐标20px,纵坐标30px的地方 |
translate3d(x,y,z) | 定义 3D 移动。 |
translateX(x) | 定义移动,只移动 X 轴 |
translateY(y) | 定义移动,只移动 Y 轴 |
translateZ(z) | 定义 3D 移动,只移动 Z轴 |
scale(x,y) | 定义 2D 缩放,1是默认值,大于1是放大,小于1是缩小 |
scale3d(x,y,z) | 定义 3D 缩放,1是默认值,大于1是放大,小于1是缩小 |
scaleX(x) | 通过设置 X 轴的值来定义缩放 transform:scaleX(.5) 将x轴向中点缩放一半 |
scaleY(y) | 通过设置 Y 轴的值来定义缩放transform:scaleY(.5) 将y轴向中点缩放一半 |
scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
rotateX(angle) | 以x轴为轴心,往x轴反方向看是顺时针旋转 |
rotateY(angle) | 以y轴为轴心,往y轴反方向看是逆时针旋转 |
rotateZ(angle) | 以z轴为轴心,往z轴反方向看是顺时针旋转 |
skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。transform:skew(45deg, 30deg) 以一个正方体为例,以该正方体的右上角参照点,则该正方体的右边向x轴正方向移动45度,该正方体的上边向y轴的正方向移动30度,连结四个点即可得出执行该扭曲代码后的正方体 |
skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换 |
skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换 |
perspective(n) | 为 3D 转换元素定义透视视图。使用该方法能让3d旋转的动画实现远大近小的视觉效果,使用方式:在3D动画的父节点中直接使用perspective: 800px ,后面的数值设置得越大,3d效果越不明显,越小越明显 |
transition
.box{
width: 100px;
height: 100px;
/* margin: 50px auto; */
/* float: right */
background-color: #f00;
}
.box:hover{
width: 10px;
transition:width 1s ease-in 0.1s;
/* 鼠标悬浮的时候,盒子box的width由100向左收缩至10px,
若.box设置了margin: 50px auto;则向中间收缩,若设置了float: right则向右收缩 */
}
/* 注意与animation区分 */
.box{
width: 100px;
height: 100px;
/* margin: 50px auto; */
/* float: right */
background-color: #f00;
animation:animateRightBox1 1s ease-in-out forwards; /* 执行animateRightBox1动画*/
}
@keyframes animateRightBox1 {
0%{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); width: 285px; left: 0px}
100%{transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg); width: 40px; left: -285px}
}