1-2-12【CSS3】CSS的3D转换

题外话：懒了好几天了，今天接着肝

文章内容输出来源：拉勾教育大前端就业集训营

1.概述

  • 概述：上一篇文章中，介绍了HTML元素的2D转换：平移、旋转、倾斜等；本章则开始介绍，HTML元素的3D转换。
  • 3D转换：transform属性不止能实现2D转换，也可以制作3D立体转换效果，比普通的x、y轴组成的平面效果多了一条z轴，如下图:
  • 透视：电脑显示屏是一个2D平面，图像之所以具有立体感(3D效果)，其实只是一种视觉呈现，通过透视可以实现此目的。

说明：“近大远小”是透视的精髓，也是在2D屏幕上展示3D效果的必要条件。

2.透视属性perspective

  • 概述：设置在z轴的视线焦点的观察位置，从而实现3D查看效果。
  • 属性值：像素值，数值越大，观察点距离原点越远，图形效果越完整且接近原始的尺寸。
  • 注意：透视属性需要设置给3D变化元素的父级。
  • 书写方式：perspective: 1000px;

说明：你会发现透视和没有透视好像没有区别？因为图像的z轴方向没有发生任何变化，所以和2D图像看起来一样。

3.3D旋转

  • 概述：3D旋转比2D旋转更加复杂，需要分别对3个方向的旋转角度进行设定。当然，如果只有一个方向有旋转角度，则只需要写那个方向即可。
  • 属性：transform
  • 属性值：
属性值 说明
rotateX(angle) 定义沿着X轴的3D旋转
rotateY(angle) 定义沿着Y轴的3D旋转
rotateZ(angle) 定义沿着Z轴的3D旋转
  • 注意事项：属性值的角度区分正负，以deg为单位（此处和2D一样），正值为顺时针方向，负值逆时针方向。

说明：在做3D转换的时候，脑子里一定要有这个坐标系，其实很简单，记住坐标轴正负和方向就好。

一个简单的案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{
            margin: 0px;
            padding: 0px;
        }
        div{
            perspective: 1000px;
            margin: 350px auto;
        }
        img{
            /* 为了居中设定的属性 */
            position: relative;
            left: 50%;
            margin-left: -150px;
            width: 300px;
            /* 过渡 */
            transition: all 0.2s linear 0s;
        }
        img:hover{
            transform: rotateX(40deg);
        }
    </style>
</head>
<body>
    <div>
        <img src="cat01.jpeg" alt="">
    </div>
</body>
</html>

说明：因为只对X轴进行了旋转，且X轴的“旋转正方向”为垂直图片向里，所以我们感觉图片上半部分离我们更远了。

透视距离设置过小的结果

说明：上面讲perspective属性时提到，该属性的属性值相当于我们的观察位置，所以距离过小会出现如图所示的情况。
一般来说，我们设定1000px就可以了。

4.3D位移

  • 概述：位移因为是3D了，所以也要分为3个方向进行移动。
  • 属性：transform
  • 属性值：
属性值 说明
translateX(x) 定义沿着X轴的位移
translateY(y) 定义沿着Y轴的位移
translateZ(z) 定义沿着Z轴的位移
  • 注意事项：属性值的角度区分正负，以px或%为单位（此处和2D一样），正值为坐标轴正方向，负值负方向。
一个简单的案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{
            margin: 0px;
            padding: 0px;
        }
        div{
            perspective: 1000px;
            margin: 350px auto;
        }
        img{
            /* 为了居中设定的属性 */
            position: relative;
            left: 50%;
            margin-left: -150px;
            width: 300px;
            /* 过渡 */
            transition: all 0.2s linear 0s;
        }
        img:hover{
            transform: translateZ(100px);
        }
    </style>
</head>
<body>
    <div>
        <img src="cat01.jpeg" alt="">
    </div>
</body>
</html>

说明：该案例对图片在Z轴进行了100px的位移，因为Z轴的正方向为垂直于图片向外，所以看起来图片变大了。

一个炫酷的案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* 取消默认样式 */
    *{
        margin: 0px;
        padding: 0px;
    }
    /* 父盒子 */
    .f-box{
        position: relative;
        width: 200px;
        height: 200px;
        margin: 200px auto;
        perspective: 5000px;
        transition: all 2.5s ease-in-out 0s;
        /* 这个特殊属性，下面会讲，记住了 */
        transform-style: preserve-3d;
    }
    /* 子盒子统一属性 */
    .f-box div{
        position: absolute;
        width: 200px;
        height: 200px;
        left: 0px;
        top: 0px;
        text-align: center;
        line-height: 200px;
        font-size: 70px;
    }
    /* 子盒子独特属性 */
    .c-box1{
        background-color: rgba(231, 45, 45, 0.521);
        transform: translateZ(100px)
    }
    .c-box2{
        background-color: rgba(231, 150, 45, 0.521);
        transform: rotateX(90deg) translateZ(100px);
    }
    .c-box3{
        background-color: rgba(219, 231, 45, 0.521);
        transform: rotateX(180deg) translateZ(100px);
    }
    .c-box4{
        background-color: rgba(119, 231, 45, 0.521);
        transform: rotateX(270deg) translateZ(100px);
    }
    .c-box5{
        background-color: rgba(45, 88, 231, 0.521);
        transform: rotateY(90deg) translateZ(100px);
    }
    .c-box6{
        background-color: rgba(172, 45, 231, 0.521);
        transform: rotateY(-90deg) translateZ(100px);
    }
    /* 旋转 */
    .f-box:hover {
        transform: rotateX(360deg) rotateY(360deg);
    }
    </style>
</head>
<body>
    <div class="f-box">
        <div class="c-box1">1</div>
        <div class="c-box2">2</div>
        <div class="c-box3">3</div>
        <div class="c-box4">4</div>
        <div class="c-box5">5</div>
        <div class="c-box6">6</div>
    </div>
</body>
</html>

说明：先用定位将6个面放到一起；然后用3D转换，将6个面各自摆放在正确的位置上；最后将父元素进行3D旋转，实现酷炫的3D效果。

transform-style属性

  • 概述：用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴。
    白话：说白了就是让子元素的3D效果，在父元素中也生效

  • 属性值：

    • flat：所有的子元素在2D平面呈现；
    • preserve-3d：保留3D控件。

  • 用法：3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style:preserve-3d，来使其变成一个真正的3D图形。

说明：父元素没有设置该属性，则子元素都会像纸片一样。

兼容性

  • Internet Explorer10、Firefox以及Opera支持transform属性。
  • Chrome 和 Safari 需要前缀 -webkit-。
  • Internet Explorer 9 需要前缀 -ms-。

前端文章汇总目录

https://www.jianshu.com/p/6d80dd616ff4

结束语：一花一世界，一木一浮生，愿与诸君共勉

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS3 Transform变形（3D转换）
    CSS3 3D 转换 三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3D变形的功能和2D变换的功...
    videring阅读 571评论 0赞 0
  • CSS3 3D转换
    浏览器支持 Internet Explorer 10 和 Firefox 支持 3D 转换。Chrome 和 Sa...
    LorenSLJ阅读 976评论 0赞 0
  • 25 CSS3中的3D转换
    技术交流QQ群:1027579432，欢迎你的加入！ 欢迎关注我的微信公众号：CurryCoder的程序人生 1....
    CurryCoder阅读 372评论 0赞 1
  • CSS3 3D转换
    我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。有什么特点 近大远小 物体后面遮挡不可见 6.1 三...
    皮皮章阅读 468评论 0赞 0
  • CSS3中2D和3D的转换
    CSS3 转换：  CSS3转换，我们可以移动，比例化，反过来，旋转，和拉伸元素。 2D转换方法： transla...
    Crazy丶Harvey阅读 620评论 1赞 2