CSS3 transform-style 属性(3d转换模块)

最新推荐文章于 2024-02-29 21:02:03 发布

407指导员

最新推荐文章于 2024-02-29 21:02:03 发布

阅读量510

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/110457910

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

3d转换模块

CSS3 transform-style 属性

默认情况下元素都是2D呈现的。通过该属性可以可以让元素呈现3D

transform-style: flat|preserve-3d;

flat默认取值为2D

preserve-3d取值为3D

注意点

transform-style和perspective属性都是设置到父元素中其子元素获得3D效果和透视属性，而不是其本身。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3d转换模块</title>
    <style>
        * {
            margin: 0;
            left: 0;
        }

        .father {
            width: 200px;
            height: 200px;
            background-color: red;
            border: 1px solid #000;
            margin: 100px auto;
            transform: rotateY(0deg);
            perspective: 500px;
            transform-style: preserve-3d;
        }

        .son {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            margin: 50px auto 0;
            background-color: blue;
            transform: rotateY(45deg);
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

1.在父元素中设置3d属性，不断旋转父元素到90°时父元素为2d消失不见，但子元素却又厚度穿过父元素。

407指导员

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3 transform-style 属性(3d转换模块)

3d转换模块CSS3 transform-style 属性默认情况下元素都是2D呈现的。通过该属性可以可以让元素呈现3Dtransform-style: flat|preserve-3d;flat默认取值为2Dpreserve-3d取值为3D注意点transform-style和perspective属性都是设置到父元素中其子元素获得3D效果和透视属性，而不是其本身。<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫