CSS3 3D 动画转换（学习笔记）

最新推荐文章于 2022-12-23 13:13:28 发布

IT小庄同学

最新推荐文章于 2022-12-23 13:13:28 发布

阅读量542

点赞数 4

文章标签： css3 3d 前端

本文链接：https://blog.csdn.net/z_ch8648/article/details/128065840

版权

CSS3 3D 动画转换

接下来带领你领会3D动画的魅力并且来实现！

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

CSS3 允许您使用 3D 转换来对元素进行格式化。

CSS 3D 转换方法

通过 CSS transform 属性，您可以使用以下 3D 转换方法：

rotateX()
rotateY()
rotateZ()

rotateX() 方法

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

div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}

rotateY() 方法

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

div
{
    transform: rotateY(120deg);
    -webkit-transform: rotateY(120deg); /* Safari 与 Chrome */
}

rotateZ() 方法

rotateZ()方法使元素绕其 Z 轴旋转给定角度：

div
{
    transform: rotateZ(120deg);
    -webkit-transform: rotateZ(120deg); /* Safari 与 Chrome */
}

三维变换（函数顺序很重要）

transform-style 设置元素的子元素是处于平面还是三维空间之中
transform-style: flat; 平面
transform-style: preserve-3d; 三维空间中

三维平移

translate3d() 三维平移
translate3d(x,y,z)
translateX() 单独在x轴
translateY() 单独在y轴
translateZ() 单独在z轴

三维旋转

rotate3d() 三维旋转

rotate3d(x,y,z,a)

rotateX(a) 根据x轴旋转

rotateY(a) 根据y轴旋转

rotateZ(a) 根据z轴旋转

三维缩放

scale3d() 三维缩放

scale3d(x,y,z)

scaleX()

scaleY()

scaleZ()

扩展：

perspective属性指定了观察者与z=0平面之间的距离，使得三维元素产生透视效果，三维元素在观察者后面的部分不会绘制出。

下面我们来实现下面效果3D转换

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .example3dElement{
            width:200px;
            height: 200px;
            transform-style: preserve-3d;
            transition: all 1s linear;
            position: relative;
            transform: translate(200px,200px) rotate3d(1,1,1,0deg);
        }
        .example3dElement:hover{
            transform: translate(300px,200px) rotate3d(1,1,1,180deg) scale3d(1,1,1.1);
        }
        .face{
            width: 200px;
            height: 200px;
            font-size: 100px;
            color: #fff;
            line-height: 200px;
            text-align: center;
            position: absolute;
        }
        .front{
            background-color: rgba(255, 255, 26, 0.7);
            transform: translateZ(100px);
        }
        .back{
            background-color: rgba(181, 255, 181, 0.7);
            transform: translateZ(-100px);
        }
        .left{
            background-color: rgba(251, 247, 18, 0.7);
            transform: rotateY(-90deg) translateZ(100px);
        }
        .right{
            background-color: rgba(43, 240, 247,0.7);
            transform: rotateY(90deg) translateZ(100px);
        }
        .top{
            background-color: rgba(45, 148, 238, 0.7);
            transform: rotateX(90deg) translateZ(100px);
        }
        .bottom{
            background-color: rgba(222, 125, 235,0.7);
            transform: rotateX(-90deg) translateZ(100px);
        }
    </style>
</head>
<body>
    <div class="example3dElement">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face left">3</div>
        <div class="face right">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
    </div>
</body>
</html>

CSS3转换属性

下表列出了所有的转换属性

transform	向元素应用 2D 或 3D 转换;
transform-origin	允许你改变被转换元素的位置;
transform-style	规定被嵌套元素如何在 3D 空间中显示;
perspective	规定 3D 元素的透视效果;
perspective-origin	规定 3D 元素的底部位置;
backface-visibility	定义元素在不面对屏幕时是否可见;