CSS3D旋转与动画

backface-visibility 属性
- 语法
- 值
转换属性
- transform
- transform-origin
- - 语法
  - 默认值
  - 单位
  - 属性值详解
- transform-style
- - 语法
  - 默认值
  - 属性值详解
- perspective
- - 属性值详解
- perspective-origin
3D 转换方法
- rotateX()
- rotateY() 方法
- rotateZ()方法,
CSS动画
- animation
- - 语法

backface-visibility 属性

隐藏旋转 div 元素的背面。

语法

backface-visibility: hidden;

值

visible 背面是可见的。
hidden 背面是不可见的。

转换属性

transform

属性定义2D与3D旋转。

transform-origin

定义旋转中心点

2D旋转默认是中心旋转，3D旋转可以自己设置。

语法

transform-origin:x y z；

默认值

transform-origin:50% 50% 0；也就是2D旋转的中心位置。

单位

transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。

属性值详解

默认值以自身原点旋转45deg。

transform-origin:50% 50% 0;相当于  transform-origin:center center;

  div {width: 200px;height: 200px;position: absolute;left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;}.div1 {background-color: #ff8900;}.div2 {transform: rotate(45deg);background-color: blueviolet;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gI53lypC-1608203450583)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201217134325595.png)]

以顶部中心

 transform: rotate(180deg);transform-origin:50% 0;相当于 transform-origin:center top;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ahXF2f1w-1608203450585)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201217134744053.png)]

以右边中心

transform: rotate(180deg);transform-origin:100% 50%;相当于 transform-origin:right center;

其他的依次类推.

transform-style

定义元素呈现方式.

语法

transform-style:flat;

默认值

transform-style:flat;默认元素是2D展示。

属性值详解

值	描述
flat	表示所有子元素在2D平面呈现。
preserve-3d	表示所有子元素在3D空间中呈现。

perspective

设置从何处查看一个元素的角度：

属性值详解

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

div
{perspective: 500;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZjV90J08-1608203450588)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201217140235573.png)]

perspective-origin

该属性允许您改变 3D 元素的底部位置。

3D 转换方法

rotateX()

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

rotateY() 方法

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

rotateZ()方法,

绕Z轴旋转。

translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转.
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

CSS动画

animation

语法

animation: name duration timing-function delay iteration-count direction fill-mode;

创建动画。

【注】动画名不要起关键字，最好见名知意。
```
格式：@keyframes 动画名 {from{/* 初始帧 */}to{/* 结束帧 */}}
```
调用动画

通过animation属性来调用动画。

animation分支属性

属性	值
animation-name：	动画名称
animation-duration	执行一次动画的完成时间，单位是秒
animation-iteration-count:	动画的执行次数 infinite 表示无数次或者是n
animation-fill-mode	forwards：在动画结束后，盒子保持结束帧状态。
animation-delay:	动画延迟执行的时间，单位是秒
	backwards 在动画开始时，包含延迟时间，让盒子保持初始帧状态。
	both backwards forwards都生效
	none(默认值)
animation-direction:	alternate交替进行。
	normal正常
	【注】alternate 反向也会算一次执行时间。
	reverse 反向从结束帧开始到初始帧结束。
animation-timing-function	linear 匀速 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速
animation-play-state	paused:暂停 running 运行【注】动画属性要有中间状态，一般是数值型。