CSS3转换

CSS3

转换

转换（transform）是css3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果。

• 移动：translate

• 旋转：rotate

• 缩放：scale

2D转换

1. 二维坐标系：2D转换是改变标签在二维平面上的位置和形状的一种技术 移动语法：transform：translate（x，y）；

   • 沿着x轴和y轴移动

   • translate最大的优点：不会影响其他盒子的位置

   • translate中的百分比单位是相对于自身元素的translate：（50%，50%）；

   • 对行内标签没效果

2. 旋转语法：transform：rotate（度数） 指的是让元素在2维屏幕平面内顺时针或逆时针旋转

   • 度数单位是deg，比如rotate（45deg）

   • 角度为正时，顺时针。为负时，逆时针

   • 默认旋转中心是元素的中心点 设置旋转中心点，transform-origin：x y； （x，y默认值为50%，可以给x，y设置像素或者方位名词）

3. 缩放语法：transform：scale（x，y）；

   transform：scale（1,1）：宽和高都放大一倍

   transform：scale（2）：只写一个参数，相当于x，y都是2

   transform：scale（0.5,0.5）：缩小

   优势：可以设置转换中心点缩放，默认以盒子中心点缩放，而且不影响其他盒子

• 属性连写：

  transform：translate（） rotate（） scale（）

  顺序会影响转换的结果

  当有位移和其他属性时，位移要放到最前

3D转换

1. 3D位移：transform：translate3d（x，y，z）；x，y，z值不能省略，如果没有就写0，z值一般都跟px

2. 3D旋转：transform：rotate3d（x，y，z）；

3. 透视：perspective

   想要在网页产生3D效果需要透视 透视也称视距（d）：就是人的眼睛到屏幕的距离

   z：物体距离屏幕的距离

   

   透视的单位是px

   透视写在被观察元素的父盒子里

4. 3D呈现：transform-style

   控制子元素是否开启三维立体环境

   transform-style：flat子元素不开启三维立体环境，默认 transform-style：preserve-3d 子元素开启三维立体环境

CSS3 动画

动画（animation）是css3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

相比于过度，动画可以实现更多变化，更多控制，连续自动播放等

动画的基本使用

先定义动画，再使用（调用）动画

1. 用keyframes定义动画（类似定义类选择器）

   @keyframes move(动画名称){
               /* 开始状态 */
               0%{
                   transform: translate(0 );
               }
               /* 结束状态 */
               100%{
                   transform: translateX(100px);
               }
           }

   from和to与0%和100%相同

2. 元素使用动画

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

3. 动画常用属性
   

1. 动画简写属性：

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

   简写属性不包含animation-play-state，经常和鼠标悬停等其他配合使用
   

元素可以添加多个动画，用逗号隔开