transform 2d/3d 语法入口(转化)
- 移动 translate 可以改变元素在页面中的位置，类似定位；
代码连写
- transform translate(100px),(100px) 括号里第一个是X轴,第二个是Y轴或者在后面加%
旋转
- rotate
transform:rotate(45deg); 单位是deg(度), 正值顺时针. 关键词绕着
缩放
- scale
transform:scale(2,3) 使用场景: 鼠标悬浮,按钮放大 后面参数为倍数(无单位) 会受中心点的影响下面的子元素、文字、属性会被缩放； 中心点的代码:transform-origin 默认旋转的基准点是中心点
2D综合写法:
- 移动在旋转前面 transform: translate(x,y) rotate(90deg) scale(x,y); 旋转在前面:transform:rotate(90deg) translate(x,y) scale(x,y)
使用顺序不同，出现的效果不同，因为旋转会改变初始轴向，再次移动就会按照改变后的轴向进行移动；
animation
@keyframs donghua {
// 开始状态
from {
transform: translateX(0px);
background-color:red;
}
// 结束状态
to {
transform:translateX(1000px)
background-color:yellow;
}
}
div {
// 调用
animation-name:donghua;
// duration 持续时间
animation-duration: 3s;
}
@keyframs donghua {
0% {
}
50% {
}
// 结束状态
100%{
}
}
/* 匀速 */
animation-timing-function: linear;
/* 慢-快-慢 默认值 */
animation-timing-function: ease;
/* 慢-快 */
animation-timing-function: ease-in;
/* 快-慢 */
animation-timing-function: ease-out;
/* 慢-快-慢 */
animation-timing-function: ease-in-out;
animation-timing-function：steps(n) 分步 实现 老电影一帧一帧，整个动画分为几步骤完成
动画简写：动画名称 持续时间 速度曲线 等待时间 执行次数 执行的方向 动画等待或结束的状态
animation: name duration(动画完成一个周期所花费的时间) timing-function(速度曲线) delay(动画何时开始) iteration-count(动画播放的次数) direction(是否在下一期逆向播放) fill-mode(结束后的状态)
3d更2d比多出一个z轴面对我们的方向 写在一起：tansform: translateX(100px) translateY(100px) translateZ(100px) 三个方向同时写：transform: translate3d(100px,100px,100px);
- XY 方向可以设置px值和%（因为有宽高）；
- Z 轴只能设置 px，不能设置%（原因是盒子没有厚度）；
子元素做3D转换，需在其父级上加transform-style属性，这样子元素做的3D转化才能为观测到；
- transform-style: preserve-3d;
- 视距 perspective保证盒子的移动能被观测到近大远小的效果；产生透视感 perspective: 1000px;
