1 3D转换

转换是使元素改变形状、尺寸和位置的一种效果

1-1 rotateX() 方法

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

div {

  width: 100px;

  height: 100px;

  background-color: #0F0;

  border: 1px solid

}

.div { transform: rotateX(50deg) }

运行效果：

rotateY() 旋转

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

.div { transform: rotateY(50deg) }

运行效果：

rotateZ() 旋转

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

.div { transform: rotateZ(50deg) }

运行效果：

1-2 转换属性

transform 向元素应用 2D 或 3D 转换。

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

语法：transform: none|transform-functions;

transform-origin 允许你改变被转换元素的位置。

设置旋转元素的基点位置

transform-origin 属性允许您改变被转换元素的位置

语法：transform-origin:x-axisy-axisz-axis;

.div {

  width: 200px;

  height: 200px;

  margin: 50px;

  border: 1px solid

}

.div1 {

  width: 100px;

  height: 100px;

  background-color: #0F0;

  transform: rotateZ(50deg);

  transform-origin: 30% 60%

}

运行效果：

transform-style 规定被嵌套元素如何在 3D 空间中显示。

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

.div {

  position: relative;

  border: 1px solid;

  margin: 100px;

  padding:10px;

  width: 200px;

  height: 200px

}

.div1 {

  position: absolute;

  padding: 50px;

  background-color: #F0F;

  border: 1px solid;

  transform: rotateY(30deg);

  transform-style: preserve-3d

}

.div2 {

  position: absolute;

  padding: 40px;

  background-color: #0F0;

  transform: rotateY(10deg);

  border: 1px solid

}

运行效果

perspective规定 3D 元素的透视效果。

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

.div {

  position: relative;

  border: 1px solid;

  margin: 100px;

  padding:10px;

  width: 200px;

  height: 200px;

  perspective: 100px

}

.div1 {

  position: absolute;

  padding: 50px;

  background-color: #F0F;

  border: 1px solid;

  transform: rotateY(30deg)

}

perspective-origin 规定 3D 元素的底部位置。

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

.div {

  position: relative;

  border: 1px solid;

  margin: 100px;

  padding:10px;

  width: 200px;

  height: 200px;

  perspective: 100px;

  perspective-origin: 10% 30%

}

.div1 {

  position: absolute;

  padding: 50px;

  background-color: #F0F;

  border: 1px solid;

  transform: rotateY(30deg)

}

运行效果

backface-visibility 定义元素在不面对屏幕时是否可见。

语法：backface-visibility: visible（可见）|hidden（隐藏）;

2 过度

2-1 浏览器支持如何工作

css3过渡是元素从一种样式逐渐改变为另一种的效果

要实现这一点，必须规定两项内容：

一，规定你希望把效果添加到那个css属性上

二，规定效果的时长

div {

  width: 100px;

  height: 100px;

  background-color: #F0000F;

  transition: width 3s

}

div:hover { width: 300px }

运行效果

初始图 触发效果图（执行过程3s）

2-2 多项改变

div {

  width: 100px;

  height: 100px;

  background-color: #F0000F;

  transition: width 3s, height 3s, background-color 3s, transform 3s

}

div:hover {

  width: 300px;

  height: 300px;

  background-color: yellow;

  transform: rotate(360deg)

}

运行效果

初始图 触发效果执行过程的变化 触发完成 效果图

鼠标悬浮时触发效果，原图会在规定时间运行完毕，鼠标离开，图会在相同时间内恢复原图！若未规定时间，触发的的时候便完成效果

2-3 过渡属性

transition 简写属性，用于在一个属性中设置四个过渡属性。

transition-property 规定应用过渡的 CSS 属性的名称。

transition-duration 定义过渡效果花费的时间。默认是 0。

transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。

transition-delay 规定过渡效果何时开始。默认是 0。