CSS transform-style属性使用案例

最新推荐文章于 2022-12-22 08:47:58 发布

zbailing

最新推荐文章于 2022-12-22 08:47:58 发布

阅读量285

点赞数

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/zbailing/article/details/123224804

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS transform-style属性使用案例</title>
    <style>
        /*
        当父元素应用transform时，子元素也会随之改变效果
        */
        .box1 {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background-color: #a7d1ff;
            margin: 50px auto;
            transform: rotateX(80deg);
            transform-style: preserve-3d;
        }
        /*
        transform-style属性指定子元素怎样在三维空间中呈现
        transform-style属性的值：
            flat（默认值）
                子元素将不保留其3d位置，表示所有子元素在2D平面呈现
            preserve-3d（比较常用）
                子元素将保留其3d位置，表示所有子元素在3D空间中呈现
        */

        .box2 {
            width: 100px;
            height: 100px;
            background-color: #ffd0b8;
            transform: rotateX(-80deg);
        }
        .box3 {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background-color: #a7d1ff;
            margin: 50px auto;
            transform: rotateX(80deg);
        }
        .box4 {
            width: 100px;
            height: 100px;
            background-color: #ffd0b8;
            transform: rotateX(-80deg);
        }

    </style>
</head>
<body>
<!--
从下面两个测试案例的效果可以发现：
transform-style: preserve-3d;下的子元素呈现的3D效果更符合我们的预期
我们通常期望子元素也能呈现3D效果
而默认的transform-style: flat;只能让子元素呈现2D效果
-->
<div class="box1">
    <div class="box2"></div>
</div>

<div class="box3">
    <div class="box4"></div>
</div>

</body>
</html>

zbailing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS transform-style属性使用案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS transform-style属性使用案例</title> <style> /* 当父元素应用transform时，子元素也会随之改变效果 */ .box1 { ...
复制链接

扫一扫