C3过渡：

2D转换之移动translate

语法：

transfom：translate（x，y）；
transfom：translateX（n）；
transfom：translateY（N）；

重点：

• 定义2D转换中的移动，沿着X和Y轴移动元素
• translate最大的优点：不会影响到其它元素的位置
• translate中的百分比单位是相对于自身元素的translate:(50%,50%);
• 对行内标签没有效果

2D转换之旋转rotate

语法：
transform：rotate(度数);
重点：

• rotate里面跟度数，单位是deg，比如rotate(45deg);
• 角度为正时，顺时针，负时，为逆时针
• 默认旋转的中心点时元素的中心点

2D转换中心点translate-origin;

语法：
translate-origin:x y;
重点：

• 注意后面的参数 X 和 Y 用空格隔开
• x y 默认转换的中心点是像素的中心点（50% 50%）
• 还可以给 x y 设置像素 或者方位名词（top bottom left right center）

2D转换之缩放 scale

语法：
transform: scale(x, y);
注意：

• 注意其中的x和y用逗号分隔
• transform(1, 1);宽和高都放大一倍，相当于没有放大
• transform(2, 2);宽和高都放大两倍
• transform(2);只写一个参数，第二个参数则和第一个参数一样，相当于scale(2, 2)
• transform(0.5, 0.5) 缩小
• scale缩放时最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其它盒子

2D转换综合写法

• 同时使用多个转换，格式为：transform: translate() rotate() scale()...;
• 顺序会影响转换的效果。先旋转会改变坐标轴方向
• 当同时有位移和其它属性的时候，记得要将位移放到最前面

2D转换总结

• 转换transform 简单理解就是变形有2D和3D之分
• 2D移动translate(x, y)最大的优势是不影响其他盒子 ，里面参数用% ,是相对于自身宽度和高度来计算的
• 可以分开写比如translateX(x)和translateY(y)
• 2D旋转rotate(度数)可以实现旋转元素 度数的单位是deg
• 2D 缩放sacle(x,y)里面参数是数字不跟单位可以是小数最大的优势 不影响其他盒子
• 设置转换中心点 transform-origin:xy;参数可以百分比、 像素或者是方位名词
• 当我们进行综合写法 ,同时有位移和其他属性的时候,记得要将位移放到最前

C3动画

动画基本使用

制作动画分为两步：
1.先定义动画
2.再使用/调用动画
用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称 {
    0% {
        transfrom:translate(0, 0);    
    }
    100% {
         transfrom:translate(100px, 0);      
    }

元素使用动画

div {
    width:200px;
    height:200px;
    background-color:aqua;
    margin:100px auto;
    /* 调用动画 */
    animation-name:动画名称;
    /* 持续时间 */
    animation-duration:持续时间;
}

动画序列

• 0%是动画的开始, 100%是动画的完成。这样的规则就是动画序列
• 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
• 动画是使元素从一种样式逐渐变化为另一种样式的效果。 可以改变任意多的样式任意多的次数
• 请用百分比来规定变化发生的时间,或用关键词"from"和"to" ,等同于0%和100%

动画常用属性

属性简写：

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

• 简写属性里面不包含animation-play-state
• 暂停动画：animation-play-state: puased; 经常和鼠标经过等其它配合使用
• 想要动画走回来，而不是直接跳回来：animation-direction:alternate;
• 盒子动画结束后，停在结束位置：animation-fill-mode: forwards;

3D移动

transform: translateZ(npx);

3D转换

透视 perspective // 写到父盒子上

• 在2D平面产生近大远小视觉立体,但是只是效果二维的
• 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内模拟人类的视觉位置,可认为安排一只眼睛去看
• 透视我们也称为视距:视距就是人的眼睛到屏幕的距离
• 距离视觉点越近的在电脑平面成像越大,越远成像越小
• 透视的单位是像素

3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着X轴，Y轴，Z轴或者自定义轴进行旋转
语法

• transform:rotateX(45deg) :沿着x轴正方向旋转45度
• transform:rotateY(45deg) : 沿着y轴正方向旋转45deg
• transform:rotateZ(45deg) :沿着Z轴正方向旋转45deg
• transform:rotate3d(x,y,z,deg) :沿着自定义轴旋转deg为角度(了解即可)

3D呈现 transform-style

• 控制子元素是否开启三维立体环境
• transform-style: false子元素不开启3d立体空间默认的
• transform-style: preserve-3d;子元素开启立体空间
• 代码写给父级,但是影响的是子盒子