css3 3D转换-移动、旋转、透视、呈现

最新推荐文章于 2024-03-05 17:29:30 发布

原创最新推荐文章于 2024-03-05 17:29:30 发布 · 208 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3

本文深入探讨了3D CSS变换的原理与应用，包括透视效果的实现方式，以及如何通过transform属性进行移动、旋转等操作，使网页元素呈现出立体感。文章通过实例代码展示了透视距离与元素大小的关系，以及transform-style属性在3D呈现中的作用。

1.移动

2.透视perspective

透视写在被观察元素的父盒子上

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            /* 透视值越小，看到的越大 */
            perspective: 500px;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: #16ccec;
            transform: translate3d(100px, 100px, 100px);
        }
    </style>
</head>

<body>
    <div></div>
</body>