3d呈现transfrom-style

在这里插入图片描述

<style>
        body{
            
        }
        .box {
            position: relative;
            margin: 100px auto;
            /* 透视 */
            perspective: 500px;
            /* 动画的持续时间是2s */
            transition: all 2s;
            /* 让子元素保持3d空间环境
            这句话必须写在最近的父元素中，写在body中将无效 */
            transform-style: preserve-3d;
        }
        .box:hover{
            transform: rotateY(-60deg);
        }
        
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }

        div:last-child {
            background-color: red;
            transform: rotateX(30deg);
        }
    </style>
</head>

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

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

运行结果：
在这里插入图片描述

当鼠标经过时：
在这里插入图片描述

相关阅读:
采用协同搜索策略的算术优化算法
【算法】牛顿迭代法求平方根及多次方根
mysql-2-用户-授权
【SA8295P 源码分析 (三)】121 - MAX9295A 加串器芯片手册分析及初始化参数分析
2022年9月11日：人生第一次相亲记录
CRF+BiLSTM代码分步骤解读
IDEA 基本配置
:active vs :focus
Git冲突解决指南：如何优雅地解决代码合并冲突
Problem C: 算法2-23：一元多项式加法

原文地址：https://blog.csdn.net/lxllxl211/article/details/127462033