3D呈现transform-style（CSS3）

朱雀 2023-10-03 13:39 56阅读 0赞

## 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，56人围观）

还没有评论，来说两句吧...

相关阅读

相关 3D呈现transform-style（CSS3）

3D呈现transform-style（CSS3） <!DOCTYPE html> <html lang="en"> <head>

朱雀/ 2023年10月03日 13:39/ 0 赞/ 57 阅读

相关 troch3d open3d例子

目录 pytorch3d参考：安装 windows版测试ok open3d使用demo open3d设置颜色 torch3d使用demo -----------

你的名字/ 2022年10月06日 06:58/ 0 赞/ 37 阅读

相关 CSS3 2D/3D转换

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。 Chrome 和 Safari 需要前缀 -webkit-。

分手后的思念是犯贱/ 2022年09月21日 05:36/ 0 赞/ 248 阅读

相关 3D 池化（MaxPool3D）和 3D（Conv3d）卷积详解

3D 池化（MaxPool3D）和 3D（Conv3d）卷积详解池化和卷积的过程是类似的，只是池化没有权重，相比起来更容易说明计算的过程。这里从 3D 池化开始详细

冷不防/ 2022年09月11日 02:25/ 0 赞/ 840 阅读

相关 Direct3D 12 尝鲜: 基本呈现

(转载请注明出处) 请叫我挖坑狂魔\_(:3」∠)\_ -------------------- 微软前几天发布了Win10的开发工具,希望使用的童鞋可以加入[win

ゞ浴缸里的玫瑰/ 2022年08月07日 09:44/ 0 赞/ 164 阅读

相关【D3.js】D3是什么

D3是什么 D3 的全称是 Data-Driven Document，可以理解为：由数据来决定绘图流程的程序设计模型。 D3 是一个JavaScript的函数库，是用来

忘是亡心i/ 2022年06月02日 07:18/ 0 赞/ 240 阅读

相关 D3DXCreateTeapot,D3DXCreateSphere,D3DXCreateTorus,D3DXCreateCylinder函数参数图解

![70][] ![70 1][] [70]: /images/20220522/537e90478faf439f9eb84a247fdf62d5.png [70

秒速五厘米/ 2022年05月22日 08:11/ 0 赞/ 242 阅读

相关 CSS3 3D 转换

rotateX() 方法通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。 div { transfo

我就是我/ 2022年03月18日 13:26/ 0 赞/ 226 阅读

相关 3D-3D:ICP

3D-3D:ICP 1. ICP算法 2. SVD方法 3.非线性优化方法 1. ICP算法 2D-2D问题是通过已知的2D图像坐标点对来求解图

素颜马尾好姑娘i/ 2022年03月12日 02:52/ 0 赞/ 287 阅读

相关 css3 3D动画

3D 在2d的基础上添加 z 轴的变化 3D 位移：在2d的基础上添加 translateZ（），或者使用translate3d（）　　translateZ（）：以

た入场券/ 2021年11月29日 23:50/ 0 赞/ 399 阅读