H5C3新属性 旋转 位移 缩放

1. 旋转 位移 缩放

transform: translate(50px, 50px);    // 位移 多个坐标之间以逗号分隔
transform: translate(50px);   // 只有一个值的时候 默认为X轴 移动 ， y 轴不变
transform: rotate(45deg);   // 旋转 单位 deg (度)
transform: scale(.5);   // 缩放 单位 无 一个值 为 XY同时缩放 两个值 同时对应x和y  适用于 旋转中心

2. 旋转中心

transform-origin: 10px 10px;  // 距离左上 各10px  (中间不加逗号)
    transform-origin: top left;  // 方位名词  左上为旋转轴
    transform-origin: 100% 100%;  // 百分比 相对于自身  100% 100% 等于右下角
    transform-origin: 100%;  // 只有一个值的时候 另一个值 默认 50%

3.  动画

使用 keyfarms定义动画, 根据百分比分配时间

@keyframes move {
            0% {}

            25% {
                transform: translate(500px);
            }

            50% {
                transform: translate(500px, 500px);
            }

            75% {
                transform: translate(0px, 500px);
            }

            100% {
                transform: translate(0px, 0px);
            }
        }

// 动画调用

// animation：动画名称 持续时间 运动曲线  何时开始  播放次数  是否反方向  动画起始或者结束的状态;


// 持续时间 和 何时开始  加单位 s (秒)
 
// 比如说给div调用
div {
　　animation: move 2s linear infinity;  // 
}
 

4. 动画回调函数

当动画完成的时间调用

const div = document.getElementByTagName('div')
div.addEventListener('animationend', function () {
        alert('完成')
    })

5. 保留3d空间 开启视距

transform-style: preserve-3d;   // 给需要做动画的盒子父级加  (保留3D空间)
body {
    perspective: 500px;   // 相对视角 给body加相当于人眼看过去
}

6. 左手准则

左手大拇指对着坐标轴的正方向,其余的手指就是旋转的方向