移动 Web （二）

标签：Web style 动画 transform 坐标轴 animation 方向 移动

空间转换

空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间， Z 轴位置与视线方向相同。 空间转换也叫 3D转换   属性：transform

平移

/*单独设置 z轴效果不明显*/
transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();

取值（ 正负 均可）

•  像素单位数值
•  百分比（参照盒子自身尺寸计算结果）

提示 默认情况下， Z 轴平移没有效果

视距 perspective

作用： 指定了 观察者 与 Z=0 平面的 距离 ，为元素添加 透视效果 透视效果： 近大远小、近实远虚 属性： ( 添加给父级 ，取值范围 800-1200 )

旋转

配合 视距perspective（800~1200） 效果更佳哦

/*绕着z轴而转 方向：顺时针*/
transform: rotateZ(值deg);
/*绕着x轴而转 方向：向里面*/
transform: rotateX(值deg);
/*绕着y轴而转 方向：向里面*/
transform: rotateY(值deg);

左手法则 – 根据 旋转方向 确定取值 正负 左手 握住旋转轴, 拇指指向正值方向 , 其他四个手指 弯曲 方向为旋转 正值 方向

立体呈现 – transform-style

作用： 设置元素的 子 元素是位于 3D 空间 中还是 平面 中 属性名：transform-style 属性值： flat：子级处于 平面 中 preserve-3d ：子级处于 3D 空间

 /*给父级元素*/
transform-style: preserve-3d;

呈现立体图形步骤 1. 父元素 添加 transform-style: preserve-3d ； 2. 子级 定位 3. 调整子盒子的 位置（位移或旋转）   提示 :  空间内，转换元素都有自已 独立的坐标轴 ，互不干扰              旋转改变了原有的坐标轴向

缩放

transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();

动画 （animation）

过渡：实现 两个状态 间的变化过程 动画：实现 多个状态 间的变化过程， 动画过程可控 （重复播放、最终画面、是否暂停）

/*定义动画:第一种*/
@keyframes 动画名称 {
    from{}
    to{}
}
/*定义动画:第二种*/
@keyframes 动画名称 {
/*百分比表示 动画时长的百分比*/
    0% {}
    10%{}
    ......
    100%{}
}

使用动画：

animation:动画名称 动画时长（s） 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
速度曲线：linear 匀速运动
分布动画：steps() 配合精灵图使用

提示： 动画名称 和 动画时长 必须赋值  取值 不 分先后顺序 如果有 两个时间 值， 第一个 时间表示 动画时长 ， 第二个 时间表示 延迟时间

多组动画

animation:
    动画1，
    动画2，
    动画n
;
animation:
run 1s steps(12) infinite,
move 3s linear forwards
;

标签：Web,style,动画,transform,坐标轴,animation,方向,移动
From： https://blog.csdn.net/2301_80115241/article/details/143094610