文档库

Appearance

3D变换 ​

开启3D ​

transform-style 设置元素的子元素是位于 3D 空间中还是平面中。

  • flat

    设置元素的子元素位于该元素的平面中。

  • preserve-3d

    指示元素的子元素应位于 3D 空间中。

css
/* Keyword values */
transform-style: flat;
transform-style: preserve-3d;

旋转 ​

css
rotateX(30deg)
rotateY(30deg)
rotateZ(30deg)

旋转方向根据左手定律即可确定：拇指指向轴方向，四指方向就是旋转方向

透视 ​

CSS 透视（perspective） 用来模拟近大远小的 3D 视觉效果，是做 3D 翻转、卡片效果、立体动画的核心概念之一。

基本语法 ​

css
perspective: 800px;

  • 值越小：透视越强，变形越明显（近大远小很夸张）

  • 值越大：透视越弱，接近 2D

用法 1：作为父元素属性（最常用） ​

css
.container {
  perspective: 800px;
}

.box {
  transform: rotateY(45deg);
}

  • 作用于子元素

  • 多个子元素共享同一个“观察视角”

用法2：作为 transform 函数 ​

css
.box {
  transform: perspective(800px) rotateY(45deg);
}
  • 只作用于当前元素
  • perspective必须作为transform属性的第一个函数

backface-visibility ​

元素的背面是其正面的镜像。虽然在 2D 中不可见，但是当变换导致元素在 3D 空间中旋转时，背面可以变得可见。 （此属性对 2D 变换没有影响，它没有透视。）

  • visible

    背面朝向用户时可见。

  • hidden

    背面朝向用户时不可见。

css
 backface-visibility:hidden

Example ​

3D翻转卡片 ​

  • 旋转整张卡片
html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .scene {
            perspective: 800px;
        }

        .card {
            width: 200px;
            height: 120px;
            position: relative;
            transform-style: preserve-3d;
            transition: all .6s;
        }

        .scene:hover .card {
            transform: rotateY(-180deg);
        }

        .front,
        .back {
            background-color: bisque;
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
        }

        .back {
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="scene">
        <div class="card">
            <div class="front">正面</div>
            <div class="back">背面</div>
        </div>
    </div>
</body>

</html>
  • 分别旋转正反面
html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .scene {
            perspective: 800px;
        }

        .card {
            width: 200px;
            height: 120px;
            position: relative;
            transform-style: preserve-3d;

        }

        .front,
        .back {
            background-color: bisque;
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            transition: .7s;
        }

        .front {
            z-index: 2;

        }

        .back {
            transform: rotateY(180deg);
        }

        .card:hover .front {
            transform: rotateY(-180deg);
        }

        .card:hover .back {
            transform: rotateY(0deg);
        }
    </style>
</head>

<body>
    <div class="scene">
        <div class="card">
            <div class="front">正面</div>
            <div class="back">背面</div>
        </div>
    </div>
</body>

</html>