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

    以前就想学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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凌空暗羽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值