过渡(transition):哪个元素需要过渡就写在哪个元素上
transition:all 0.3s linear 0;
/*要过渡的属性 过渡执行的时间 运动速度 何时开始*/
2D变形(transform)
注意:组合写法:旋转之后,坐标会跟着旋转
移动:
transform:translate(-50%,-40%); /*x轴位移-50% y轴位移-40%*/
transform:translateX(30px); /*x轴移动30像素*/
transform:translateY(50px); /*y轴移动50像素*/
缩放:
transform:scale(.1,.2); /*宽度缩为0.1倍,高度缩为0.2倍*/
transform:scale(2); /*放大2倍,只有一个值另一个值自动*/
旋转:
transform-origin:top right; /*设置旋转中心为右上角*/
transform:rotate(50deg); /*顺时针旋转50度(默认以中心为旋转点)*/
倾斜:
transform:skew(20deg,30deg); /*x轴倾斜20度,y轴倾斜30度*/
动画(animation)
animation:donghua 0.3s linear 0 infinite alternate forwards;
/*动画名称 完成时间 运动速度 何时开始 播放次数(默认1次) 是否反方向(否) 保存最后状态(不)*/
/*donghua 0.3s 匀速 0s后开始 无限循环 正反方向来回 保持 */
/*声明动画*/
@keyframes donghua{
0%{
}
50%{
}
100%{
}
}
3D
transform:rotateX(10deg);
transform:rotateY(10deg);
transform:rotateZ(10deg);
transform:rotete(10deg,20deg,30deg);
transform-style:preserve-3d; /*3D效果*/