有关CSS3 3D盒子模型的一些总结

最新推荐文章于 2022-10-02 09:19:38 发布

凌空暗羽

最新推荐文章于 2022-10-02 09:19:38 发布

阅读量440

点赞数

分类专栏： # 基础前端笔记文章标签： css3

本文链接：https://blog.csdn.net/weixin_46560512/article/details/109672710

版权

基础前端笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

以前就想学CSS3动画，觉得挺高级的，但后来因为一些原因，没能理解好，也没有时间，最近重新学了一波。为了帮助那些像我一样理解能力不太好的人（同时也使自己更好的理解知识点），这里做一下总结。主要是我在学习过程中遇到的一些问题，如果有写的不清晰的，希望大家能够指正。

一、perspective设置透视：
在这里插入图片描述

如上图所示透视可以理解成图中的d，即眼睛到显示屏的距离，当透视的值变小，可以理解成人走进了去看物体，那么物体就变大了；
注意:在设置时，perspective要加到父级盒子里面，eg:perspective:500px;

二、translateZ与perspective
首先，来说一说这个translateZ，如上图所示，translateZ就相当于z,在父级元素加了透视的情况下（视距d一定），z越大，看到的物体越大(当z>d的时候就看不到物体了）；

三、translateZ与rotate
说实话，之前我也不是很懂这个旋转与translateZ，以为translateZ不会随着rotate的改变而改变，后来我看了看大佬的博客，发现这个一起改变的；举个例子，如果是你开始是正视物体的话，那么rotateX(-90deg)得到的将是下面的图片：
那么具体rotate的方向是如何来确定的呢？—— "左手定理”
在这里插入图片描述
四、立方盒子的搭建方法

方法一：
在这里插入图片描述
附上源码：

 div[class^="box"] {
            /*将6张图片叠在一起*/
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0.6;
            /*观察内层的图片*/
            background-color: rgb(228, 111, 173);
        }
        
        .box1 {
            background-image: url("./images/1.jpg");
            transform: translateZ(100px);
        }
        
        .box2 {
            background-image: url("./images/2.jpg");
            transform: translateZ(-100px);
        }
        
        .box3 {
            background-image: url("./images/3.jpg");
            transform: translateX(-50%) rotateY(-90deg);
        }
        
        .box4 {
            background-image: url("./images/7.jpg");
            transform: translateX(50%) rotateY(90deg);
        }
        
        .box5 {
            background-image: url("./images/5.jpg");
            transform: translateY(50%) rotateX(-90deg);
        }
        
        .box6 {
            background-image: url("./images/6.jpg");
            transform: translateY(-50%) rotateX(90deg);
        }

方法二：
在这里插入图片描述
附上源码：

  #outerbox {
            position: absolute;
            width: 200px;
            height: 200px;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
            transform-style: preserve-3d;
            /*保留子级元素的3D变换*/
            transition: all 2s ease;
        }
        /*属性选择器^=选择以“**”开头的标签*/
        
        div[class^="box"] {
            /*将6张图片叠在一起*/
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0.6;
            /*观察内层的图片*/
            background-color: rgb(228, 111, 173);
        }
        
        .box1 {
            background-image: url("./images/1.jpg");
            transform: translateZ(100px);
        }
        
        .box2 {
            background-image: url("./images/2.jpg");
            transform: translateZ(-100px);
        }
        
        .box3 {
            background-image: url("./images/3.jpg");
            transform: rotateY(-90deg) translateZ(100px);
        }
        
        .box4 {
            background-image: url("./images/7.jpg");
            transform: rotateY(90deg) translateZ(100px);
        }
        
        .box5 {
            background-image: url("./images/5.jpg");
            transform: rotateX(-90deg) translateZ(100px);
        }
        
        .box6 {
            background-image: url("./images/6.jpg");
            transform: rotateX(90deg) translateZ(100px);
        }

五、关于其中的translate充当定位的使用

相比于传统的margin，一般情况下translate定位有效的防止布局混乱，但是我在使用的时候也发现了一个问题，恰恰margin正常，translate会发生布局紊乱。在用margin布局的时候，如果margin所相对的那个元素发生了移动（或者删除，排除 “visibility: hidden;”的情况）就容易造成混乱，这样就体现出了translate的优势了；但是，我用这个的时候意外发现，这个translate在元素发生旋转的时候也会造成布局紊乱，经过测试发现，得到如下结论：

在这里插入图片描述
六、transition的使用

transition不仅仅是 transition all 3s ease;transition里面还有一个transition-property,使用方法如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition的使用</title>
    <style>
        /*设置body样式,防止height默认为0，方面子级元素利用百分号来定义宽高*/
        
        html.body {
            width: 100%;
            height: 100%;
        }
        
        #mydiv {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            background-color: rgb(81, 197, 58);
            border: 1px red solid;
            transition: width 2s ease, height 3s ease, background-color 3s ease;
        }
        
        #mydiv:hover {
            width: 400px;
            height: 400px;
            background-color: deepskyblue;
        }
    </style>
</head>

<body>
    <div id="mydiv"></div>
</body>

</html>

七、animation 和 transition 的区别分析

1、transition，“谁做动画给谁加”，通常需要配合hover等事件（或者配合js修改对应标签的属性）来触发，而animation不需要其他事件辅助，能直接使用；
2、animation 配合 @keyframe 可以设置很多不同的中间状态，而transition只能设置起始两种状态；
3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，但是transition 只能触发一次（只有四个属性，即动画属性+动画时长+动画速度+动画延时）；
4、在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；我们在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了；

参考链接：animation 和 transition 的区别—— mufengchun

凌空暗羽

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
有关CSS3 3D盒子模型的一些总结

以前就想学CSS3动画，觉得挺高级的，但后来因为一些原因，没能理解好，也没有时间，最近重新学了一波。为了帮助那些像我一样理解能力不太好的人（同时也使自己更好的理解知识点），这里做一下总结。主要是我在学习过程中遇到的一些问题，如果有写的不清晰的，希望大家能够指正。一、perspective设置透视：如上图所示透视可以理解成图中的d，即眼睛到显示屏的距离，当透视的值变小，可以理解成人走进了去看物体，那么物体就变大了；（注意:在设置时，perspective要加到父级盒子里面，eg:per
复制链接

扫一扫