017-CSS3转换&过渡

一、CSS3 2D转换

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

（一）、2D平移

translate(x, y)

**translate(x, y)**方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动

div {
  transform: translate(300px, 200px);
}

translateX()

translateX(n) 定义 2D 平移，沿着 X 轴移动元素

div {
  transform: translateX(300px);
}

translateY()

translateY(n) 定义 2D 平移，沿着 Y 轴移动元素

div {
  transform: translateY(200px);
}

（二）、2D缩放

scale()

**scale(x, y)**方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

div {
  transform: scale(2, 2);
}

scaleX()

scaleX(n) 定义 2D 缩放转换，改变元素的宽度

div {
  transform: scaleX(3);
}

scaleY()

scaleY(n) 定义 2D 缩放转换，改变元素的高度

div {
  transform: scaleY(4);
}

（三）、2D倾斜

skew()

**skew(x, y) **方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

div {
  transform: skew(20deg, 30deg);
}

skewX()

skewX(angle) 定义 2D 倾斜转换，沿着 X 轴翻转

div {
  transform: skewX(20deg);
}

skewY()

skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴翻转

div {
  transform: skewY(30deg);
}

（四）、2D旋转

rotate(deg) 方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转

div {
  transform: rotate(30deg)
}

（五）、基点位置

transform-origin 属性允许您改变被转换元素的位置
2D 转换元素能够改变元素 x 和 y 轴

• 属性必须与 transform 属性一同使用

• 语法：transform-origin: x-axis y-axis z-axis;

• 参数

  • x-axis {length | string}: 定义视图被置于x轴的何处，可能的值：left center right
  • Y-axis {length | string}: 定义视图被置于Y轴的何处，可能的值：top center bottom
  • Z-axis {length}: 定义视图被置于z轴的何处

• 实例

  div {
    transform: rotate(45deg);
    transform-origin: 20%　40%
  }
  

二、CSS3 3D转换

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

（一）、3D位移

translate3d（）

** translate3d（x, y, z）**：指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略

translateZ()

translateZ(n) 定义 3D 平移，沿着 Z 轴移动元素

div {
  transform: translateZ(50px);
}

（二）、3D缩放

scale3d（）

scale3d（x, y, z）：指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴。参数不允许省略

scaleZ()

scaleZ(n) 定义 3D 缩放转换，沿着Z轴方向缩放

div {
  transform: scaleZ(50deg);
}

（三）、3D旋转

rotate3d（）

rotate3d（x, y, z, d）：定义一个变换，它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正，运动将为顺时针，如果为负，则为逆时针

• 参数
  • x {number} ：表示旋转轴X坐标方向的矢量
  • y {number} ：表示旋转轴Y坐标方向的矢量
  • z {number} ：表示旋转轴Z坐标方向的矢量
  • d {angle}：旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转

div {
  transform: rotate3d(1, 0, 0, 60deg);
}

rotateX()

rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转

div {
  transform:rotateX(120deg);
}

rotateY()

rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转

div {
  transform:rotateY(120deg);
}

rotateZ()

rotateY() 方法，元素围绕其 Z 轴以给定的度数进行旋转

div {
  transform:rotateZ(120deg);
}

（四）、3D空间位置显示

**transform-style **属性规定如何在 3D 空间中呈现被嵌套的元素

• 注释：该属性必须与 transform 属性一同使用

• 语法: transform-style: flat|preserve-3d

• 参数

  • flat ：表示所有子元素在2D平面呈现
  • preserve-3d ：表示所有子元素在3D空间中呈现

• 实例：使被转换的子元素保留其 3D 转换
  
  
  

（五）、透视效果

**perspective **属性定义 3D 元素距离视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图

• 注释：perspective 属性只影响 3D 转换元素

• 语法: perspective: number|none;

• 参数

  • {number} ：元素距离视图的距离，以像素计
  • none ：默认值。与 0 相同。不设置透视

• 实例：使被转换的子元素保留其 3D 转换

  <div id="div1">
    <div id="div2">Hello</div>
  </div>
  

  #div1 {
    perspective: 300
  }
  #div2 {
    transform: rotateX(45deg)
  }
  

（六）、backface-visibility

backface-visibility：属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用

• 语法：backface-visibility: visible|hidden;

• 参数

  • visible：背面是可见的
  • hidden：背面是不可见的

• 实例

  <div class='div1'>div1</div>
  <div class='div2'>div2</div>
  

  div {
    widht:60px; height: 60px;
    transform: rotateY(180deg);
  }
  .div1 {
    backface-visibility: hidden;
  }
  .div2 {
    backface-visibility: visible;
  }
  

三、CSS3 过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript

它是如何工作？

CSS3 过渡是元素从一种样式逐渐改变为另一种的 效果。
要实现这一点，必须规定两项内容：
指定要添加效果的CSS属性
指定效果的持续时间。

（一）、transition

transition：属性是一个简写属性，用于设置四个过渡属性transition-property、transition-duration、transition-timing-function和transition-delay

• 注释:请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果

• 语法：transition: property duration timing-function delay;

• 实例

  div {
    width: 100px;
    transition: all 2s linear 0.5s;
  }
  div:hover {
    width: 300px;	
  }
  

（二）、transition-property

transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）

• 提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生

• 注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果

• 语法：transition-property: none|all|property;

• 参数

  • none: 没有属性会获得过渡效果
  • all: 所有属性都会获得过渡效果
  • {property}: 定义应用过渡效果的css属性名称，列表以逗号隔开

• 实例

  div {
    transition-property: all;
    transition-duration: 0.5s;
    width: 10px 
  }
  div:hover {
    width: 100px
  }
  

（三）、transition-duration

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）

• 语法：transition-duration: time

• 参数

  • {time}: 规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果

• 实例

  div {
    transition-property: all;
    transition-duration: 1.5s;
    width: 10px 
  }
  div:hover {
    width: 100px
  }
  

（四）、transition-timing-function

transition-timing-function 属性规定过渡效果的速度曲线，该属性允许过渡效果随着时间来改变其速度

• 语法：

  • transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n);

• 参数

  • linear：规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
  • ease： 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
  • ease-in： 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
  • ease-out ：规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
  • ease-in-out： 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
  • cubic-bezier(n,n,n,n)： 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

• 实例

  div {
    transition-property: all;
    transition-duration: 1.5s;
    transition-timing-function: linear;
    width: 10px 
  }
  div:hover {
    width: 100px
  }
  

（五）、transition-delay

transition-delay 属性规定过渡效果何时开始

• 语法：transition-delay: time;

• 参数

  • {time}：规定在过渡效果开始之前要等待的时间

• 实例

  div {
    transition-property: all;
    transition-duration: 1.5s;
    transition-delay： 0.5s
    width: 10px 
  }
  div:hover {
    width: 100px
  }
  

四、课后作业

• 熟悉2D转换，并使用每个转换方式进行编写
• 熟悉3D转换，并使用每个转换方式进行编写
• 熟悉css3过渡，并使用其制作一个css过渡页面