CSS之动画及2D、3D转换

CSS 2D转换

什么是转换？

转换(transform)可实现元素的位移(translate)、旋转(rotate)、缩放(scale)，理解为变形

二维坐标系

移动translate

2D移动类似于定位

1. 语法格式：

transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);

2. 重点
   ① x y为百分数
   ② 沿着x，y轴移动
   ③ 转换不会影响其他元素的位置
   ④ translate中的百分比单位是相对于自身元素的
   ⑤ 对行内标签没有效果

旋转rotate

1. 语法格式：

transform: rotate（度数）;

2. 重点
   ① rotate里面跟度数，单位是deg，eg：rotate(45deg);
   ② 顺时针角度为正，逆时针角度为负
   ③ 默认旋转的中心点是元素的中心点

转换中心点transform-origin

1. 语法格式：

transform-origin: x y;

2. 重点
   ① 参数x y用空格隔开
   ② 默认旋转的中心点是元素的中心点
   ③ 可以给x y设置百分比、像素或者方位名词（top bottom left right center）

缩放scale

1. 语法格式：

transform: scale(x,y);

2. 重点
   ① x,y写数字不带单位，表示倍数
   ② 等比例缩放，同时修改宽度和高度，写一个数字即可
   ③ scale优势：不影响其他盒子，可设置缩放的中心点

2D转换综合写法

注意：
① 同时使用多个转换，格式为：tranform:translate() rotate() scale()
② 顺序会影响转换的效果（先旋转会改变坐标轴的方向）
③ 当同时有位移和其他属性的时候，位移放在最前面

CSS3 3D转换

三维坐标系

3D移动translate3d

1. 语法格式：
   括号内一般写px单位,不用%

//x,y,z不能省略，没有就写0
① transform: translate3d(x,y,z);
② transform: translateX(n);
③ transform: translateY(n);
④ transform: translateZ(n); //可实现近大远小
⑤ transform: translateX(n) translateY(n) translateZ(n);

透视perspective

加了透视才能在网页中产生3D效果

注意：
① 透视效果要写在被观察元素的父盒子上面
② d:就是视距，视距是一个距离人的眼睛到屏幕的距离，视距越近，物体越大
③ z：就是z轴，物体距离屏幕的距离，z轴（正值）越大，看到的物体越大

语法格式：

perspective: d px;

translateZ和perspective透视

translateZ写在被观察元素中
perspective写在被观察元素的父盒子中
应用：一般给父盒子加透视，对子盒子们加translateZ形成不同的透视效果

3D旋转rotate3d

可以让元素绕着x轴y轴z轴或者自定义轴旋转
语法格式：

transform:rotateX(45deg); //沿x轴正方向旋转45度
transform:rotateY(45deg); //沿y轴正方向旋转45度
transform:rotateZ(45deg); //沿z轴正方向旋转45度
transform:rotate3d(x,y,x,deg); //沿自定义轴正方向旋转，deg为角度（了解）

eg：
transform3d(1,0,0,45deg)表示沿x轴旋转45度
transform3d(1,1,0,45deg)表示沿xy的对角线旋转45度
其中1也可以改成5，10，效果不同

3D呈现transform-style（重要重要）

控制子盒子是否开启三维立体空间
注意：代码写给父盒子，但影响的是子盒子

// 子元素不开启3d立体空间，默认值
tranform-style:flat;
// 子元素开启立体空间
transform-style：preserve-3d;

CSS3 动画

相对于过渡，动画可以做更多控制，连续自动播放

动画的基本使用

步骤：① 先定义动画 ② 调用动画

1. 用keyframes定义动画(类似定义类选择器)

@keyframes 动画名称 {
    //开始状态
    0% {
        width:100px;
    }
    //结束状态
    100% {
        width:200px;
    }
}

2. 调用动画

div {
    width:200px;
    height:200px;
    background-color:pink;
    //动画名称
    animation-name:move;  
    //持续时间
    animation-duration:2s;  
}

动画序列

• 0%是动画的开始，100%是动画的完成状态
• 在@keyframes中规定某项CSS样式
• 可以改变任意多的样式任意多的次数
  其中每个百分比是总的时间的占比
  eg：

@keyframes move {
    // 0%可省略
    0% {
        transform:tranlate(0,0);
    }
    25% {
        transform:tranlate(1000px,0);
    }
    50% {
        transform:tranlate(1000px,500px);
    }
    75% {
        transform:tranlate(0,500px);
    }
    100% {
        transform:tranlate(0,0);
    }
}

• 用百分比规定变化发生的时间，或用"from"“to”，等同于0%和100%

动画常用属性

animation-iteration-count规定播放次数，默认是1，还有count次数 infinite无限
简写：
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始 结束状态
注意：
① 前两个属性name和duration必须写，其余默认的可以不写
② 简写属性里不加animation-play-state
③ 想要动画走出来而不是直接跳回来：animation-direction：alternate
④ 盒子动画结束后，停在结束位置：animation-fill-mode：forwords

运动曲线细节

步长steps()括号里写分几步完成动画，有了steps就不用再写ease或linear