【CSS3】CSS3 3D 转换示例 - 盒子模型翻转示例 ( 开启透视视图 | 设置过渡动画 | 设置 3D 呈现样式 | 鼠标移动到控件上方效果 | 设置两个子盒子模型背靠背效果 )

韩曙亮

发布于 2024-05-24 09:58:12

1820

发布于 2024-05-24 09:58:12

文章被收录于专栏：韩曙亮的移动开发专栏

一、盒子模型翻转示例

1、核心要点

开启透视视图

HTML 页面呈现 3D 效果 , 需要设置 3D 空间中的透视效果属性 , 该属性的属性值表示观察者眼睛 ( 视点 ) 到 3D 转换元素 ( 盒子标签模型 ) 的距离 , 单位是像素 ;

        body {
            /* 设置透视视图效果 */
            perspective: 500px;
        }

上述代码告诉浏览器 , 观察者的眼睛距离投影平面 500 像素 , 在这个距离会影响 3D 转换元素的视觉效果 , 具体效果就是 " 近小远大 " ;

如果不设置透视视图效果 , 那么整个三维空间中 , 不管多远 , 显示的标签盒子大小都一样 ;

设置过渡动画

如果需要为 3D 变换过程设置过渡时间 , 只需要在父盒子中设置 transition 属性即可 , transition 属性设置盒子模型属性值变化时的过渡效果 ;

            /* 设置过渡动画 */
            transition: all 0.5s;

上述代码告诉浏览器该盒子模型及子盒子模型所有可过渡的属性值在 0.5 秒内平滑地改变 ;

设置 3D 呈现样式

盒子模型的父容器和子容器都可以设置 3D 变换效果 , 如果要为子容器设置 3D 变换效果 , 则需要在父容器的盒子模型样式中设置 transform-style: preserve-3d; 属性 ,

            /* 父盒子 和 子盒子 使用不同的 3D 变换效果 */
            transform-style: preserve-3d;

上述代码告诉浏览器子容器盒子模型保留其的 3D 变换效果 , 即子盒子模型的 3D 效果是相对于它们自己的 3D 空间 , 而不是相对于父元素的平面 ;

鼠标移动到控件上方效果

:hover 是一个伪类选择器 , 该选择器表示用户与页面进行交互的一种状态 , 即鼠标指针停留在盒子模型上方时的一种状态 ;

        .box:hover {
            /* 鼠标移动到父盒子处 绕 Y 轴旋转 */
            transform: rotateY(180deg);
        }

默认状态下 , .box 类型的盒子显示的是 .box 类型的样式 , 如果将鼠标移动到盒子模型上方时 , 会显示 .box:hover 样式 ;

设置两个子盒子模型背靠背效果

父容器中设置相对定位 , 根据子绝父相原则 , 子盒子使用了绝对定位 , 父盒子就要使用相对定位 ;

第一个子容器显示在正面 , 正常设置即可 ;

第二个子容器显示在背面 , 此时需要绕 Y 轴翻转 180 度 , 才能贴到背面 ;

        .box {
            /* 父盒子属性设置 */
            /* 设置相对定位 
               子绝父相 子盒子使用了绝对定位 父盒子就要使用相对定位 */
            position: relative;
            /* 父盒子 和 子盒子 使用不同的 3D 变换效果 */
            transform-style: preserve-3d;
        }
        
        .box div:first-child {
            /* 使用绝对定位 */
            position: absolute;
        }
        
        .box div:last-child {
            /* 使用绝对定位 */
            position: absolute;
            /* 第二个子盒子 ( 背面盒子 ) 绕 Y 轴旋转 180 度 
               这样旋转后显示 背面 文字不会翻转 */
            transform: rotateY(180deg);
        }

2、完整代码示例

代码示例

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>transform-style 属性值设置 3D 呈现效果</title>
    <style>
        body {
            /* 设置透视视图效果 */
            perspective: 500px;
        }
        
        .box {
            /* 父盒子属性设置 */
            /* 设置相对定位 
               子绝父相 子盒子使用了绝对定位 父盒子就要使用相对定位 */
            position: relative;
            /* 宽度 和 高度 200 像素 */
            width: 200px;
            height: 200px;
            /* 距离顶部 100 像素, 水平方向居中 */
            margin: 100px auto;
            /* 设置过渡动画 */
            transition: all 0.5s;
            /* 父盒子 和 子盒子 使用不同的 3D 变换效果 */
            transform-style: preserve-3d;
        }
        
        .box:hover {
            /* 鼠标移动到父盒子处 绕 Y 轴旋转 */
            transform: rotateY(180deg);
        }
        
        .box div:first-child,
        .box div:last-child {
            /* 设置文字大小 */
            font-size: 30px;
            /* 设置文字颜色 */
            color: #fff;
            /* 设置文字在盒子中水平对齐 */
            text-align: center;
            /* 设置文字在盒子中垂直对齐 */
            line-height: 100px;
        }
        
        .box div:first-child {
            /* 使用绝对定位 */
            position: absolute;
            top: 0%;
            left: 0%;
            width: 50%;
            height: 50%;
            background-color: red;
            /* 设置第一个盒子显示在最顶部 */
            /* z-index: 1; */
        }
        
        .box div:last-child {
            /* 使用绝对定位 */
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50%;
            height: 50%;
            background-color: blue;
            /* 第二个子盒子 ( 背面盒子 ) 绕 Y 轴旋转 180 度 
               这样旋转后显示 背面 文字不会翻转 */
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <!-- 
        父盒子 中两个子盒子 分别是正面 和 背面
        翻转的是 父盒子 不是 两个子盒子
     -->
    <div class="box">
        <div>正面</div>
        <div>背面</div>
    </div>
</body>

</html>