css3——3D动画、transform-style：preserve-3d、transform：perspective()、perspective-origin

最新推荐文章于 2024-07-24 20:42:50 发布

红孩儿2011

最新推荐文章于 2024-07-24 20:42:50 发布

阅读量505

点赞数

文章标签： css css3

原文链接：https://blog.csdn.net/zyz00000000/article/details/82906528

版权

transform-style：preserve-3d，该属性设置在父级元素中，它的子级元素具有3d效果

注意：设置了该属性，就不能防止子级元素溢出，即不能设置overf：hidden属性；如果设置了overflow：hidden，那么transform-style：preserve-3d就无效。

transform：perspective；景深，观察者到物体的距离；单位：px，比如：transform：perspective(500px);

英语：perspective：透镜，望远镜;观点，看法;远景，景色;洞察力

（1）该属性设置在父级元素中，对于子级元素而言，都只有一个公共的视角

比如：该例子中，父级设置3d属性，设置景深；三个子级元素的旋转角度都是 60度，但是视觉上却不一样，因为观察者的视角是某个特定位置。该视角下去看三个子级，

<style>
        .wrapper{
            position: absolute;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 300px;
            border: 1px solid black;
            transform-style: preserve-3d;
            transform: perspective(500px);
        }
        .wrapper div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: red;
            transform: rotateX(60deg);
        }
        .wrapper div:nth-of-type(2){
            width: 100px;
            height: 100px;
            background: blue;
            transform: rotateX(60deg);
        }
        .wrapper div:nth-of-type(3){
            width: 100px;
            height: 100px;
            background: green;
            transform: rotateX(60deg);
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

注意：保留3d+景深+旋转 == 才会看到3d效果

（2）如果transform：perspective设置在子级元素中，对每个子级进行单独的视角设置

注意：transform属性要复合写，不然会覆盖无效。

而且，属性有先后：transform: perspective(500px) rotateX(60deg);

比如：三个子级的景深：transform: perspective(500px) rotateX(60deg);

结果：

在这里插入图片描述

如果其中一个的景深是：transform: perspective(100px) rotateX(60deg);

结果：景深太小，视角距离物体越近，那么看着物体会变大。

在这里插入图片描述
3. perspective-origin：深源，也是视角的位置，确定了视角在水平面的位置；景深确定的是：垂直高度

这样才能确定视角在空间中的位置。父级属性，默认情况下，在父级容器中心 50% 50%

对于 Chrome 和 Safari 用户: 为了更好地理解perspective-Origin属性，请查看查看实例.

因为视角位置的改变，看到的物体样子也发生变化，物体的移动效果，直接看实例

注意：transform：perspective()；和 perspective-origin；两个属性都是设置在父级中，才有效果，是两个关联的属性

x 父级盒子宽的相对值，默认50%。值：left、center、right；length；%
y 父级盒子高的相对值，默认50%。值：top、center、bottom；length； %
4. backface-visibility：visible(可见) | hidden(隐藏)

背面是否可以看见

转轴：css3属性的空间直角坐标系是相对每一个物体本身的，即任何一个物体都有自己的空间直角坐标系。当然如果父级物体沿着自己的轴转动，就会出现子级相对父级的轴旋转的效果。

练习：写一个旋转木马

红孩儿2011

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3——3D动画、transform-style：preserve-3d、transform：perspective()、perspective-origin

transform-style：preserve-3d，该属性设置在父级元素中，它的子级元素具有3d效果注意：设置了该属性，就不能防止子级元素溢出，即不能设置overf：hidden属性；如果设置了overflow：hidden，那么transform-style：preserve-3d就无效。transform：perspective；景深，观察者到物体的距离；单位：px，比如：tra...
复制链接

扫一扫