3D呈现transform-style（CSS3）

最新推荐文章于 2025-05-13 17:00:00 发布

原创最新推荐文章于 2025-05-13 17:00:00 发布 · 297 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

当前文章被收录于：

前端

264 篇文章 5 人学习

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了CSS3中的transform-style属性，特别是`preserve-3d`值如何用于创建3D立体空间效果。通过一个示例展示了如何使用此属性与rotateY和rotateX结合，创建3D旋转的盒子效果，其中内部div元素分别呈现出不同的颜色和角度。这个交互式示例演示了3D空间中的变换和保留3D子元素结构的重要性。

3D呈现transform-style（CSS3）

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D呈现transform-style</title>
    <style>
        body {
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;

            /*    让元素保持3d立体空间环绕 */
            transform-style: preserve-3d;

        }

        .box:hover {
            transform: rotateY(89deg);
        }

        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: skyblue;
        }

        .box div:last-child {
            background-color: purple;
            transform: rotateX(60deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>

</html>