CSS3转换

**转换(tranform)**是CSS3中具有颠覆性的特征之一，可以实现元素的位移，旋转、缩放的效果

2D转换

二维坐标系

1. 移动translate，类似于定位
   语法

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

   (目前学到的移动盒子位置的方法有：定位，盒子外边距，2d转换移动)

   • translate最大优点：不会影响到其他元素的位置
   • 值为百分比时是相对于自身来说的
   • 对行内标签没有效果
   • 应用：hover过渡效果

   小技巧：结合定位使盒子水平居中，使用translate(-50%,-50%),代替原本要水平居中所使用的到的外边距

2. 旋转 rotate
   语法

   transform:rotate(度数);
   

   重点：

   • 单位是deg,如rotate(45deg)
   • 角度为正时，顺市政，角度为负时，逆时针
   • 默认旋转中心点事元素的中心点
     转换中心点
     transform-origin: x y; (空格隔开，默认50% 50%, 可以设置像素或方位名词)

3. 缩放 scale
   语法

   transform:scale(x,y);
   

   重点

   • 值为数字不跟单位
   • 1就是1倍即不变，2是2倍，0.5是缩小一半
   • 等比例缩放：(1)同时修改x,y（2）只写一个参数代表x，y默认和第一个参数一样
   • 优势：不会影响其他盒子，而且可以变换缩放的中心点（transform-origin）

4. 综合写法，以及顺序问题

   transform：translate() rotate() scale();
   

   • 其顺序会影响转换的效果，先旋转会改变坐标轴的位置
   • 但我们同事有位移和其他属性时，记得要将位移放到最前

动画

动画（animation）可通过多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果，作为学习3D转换的前提。
相较于过渡（transition），动画可以实现更多变化，更多控制，连续自动播放等效果。

1. 先用keyframes定义动画

   /* 定义动画 */    /
   /* 可以做多个状态的变化 */
   /* 百分比要整数 */
   /* 百分比是按时间来划分的 */
   @keyframes 动画名称{
   	0%{
   		width：100px;
   	}
   	100%{
   		width:200px;
   	}
   }
   div{
   	
   }
   

   重点

   • 0% 是开始状态，100%是结束状态

2. 调用动画

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

3. 常用动画属性

   
   速度曲线的小细节
   steps(5)表示过程走了5步
   

4. 简写属性
   animation: 动画名称 持续时间 运动曲线 何时播放 播放次数 是否反方向 动画起始或结束状态。前面两个不能省略

   • 暂停动画animation-play-state: puased; 不在简写属性里，通常和鼠标经过等配合使用。

3D转换

特点：近大远小，物体后面遮挡不可见
三维坐标系

最常用的是3D旋转和3D位移

1. 3D位移：translate3d(x,y,z)
   
   简写中xyz是不能省略的，如果没有就写0
2. 3D旋转：rotate3d(x,y)
   左手准则
   

3. 透视：perspective
   • 模拟人的视觉位置
   • 也称为视距，视距就是人的眼睛到屏幕的距离
   • 单位是像素
   • 透视写到被观察的父盒子上
4. . 3D呈现：transform-style

实现从左到右

• 控制子元素是否开启三维立体环境
• transform-style:flat子元素默认不开启
• transform-style:preserve-3d;子元素开启立体空间
• 代码写给父级，但影响的是子盒子
• 这个属性很重要，后面要用