CSS3D旋转与动画

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这样的关键词。

属性值详解

1. 默认值以自身原点旋转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)]

2. 以顶部中心

 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)]

3. 以右边中心

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;

1. 创建动画。

   【注】动画名不要起关键字，最好见名知意。

   格式：
               @keyframes 动画名 {
                   from{
                       /* 初始帧 */
                   }
                   to{
                       /* 结束帧 */
                   }
               }
   

2. 调用动画

   通过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 运行 【注】动画属性要有中间状态，一般是数值型。

|

| animation-timing-function | linear 匀速 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速 |
| animation-play-state | paused:暂停 running 运行 【注】动画属性要有中间状态，一般是数值型。 |