html+css基础：25、3D变换(3D空间与景深/透视点的位置/位移/旋转/缩放/多重变换/背部可见性)

狮子座的男孩2026-10-25 19:07

3D变换的3D空间与景深/透视点的位置/位移/旋转/缩放/多重变换/背部可见性等：

Ⅰ、3D空间与景深：transform-style: preserve-3d;/perspective: 500px;

其一、代码为：

javascript 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_3D空间与景深</title>
    <style>
        .outer {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            margin: 0 auto;
            margin-top: 100px;
            /* 开启3D空间(开启后发现元素在3D空间中，inner 看起来在框子下面) */
            transform-style: preserve-3d;
            /* 设置景深（有了透视效果，近大远小）,值越大越正宽，值越小越细长 */
            perspective: 500px;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
            transform: rotateX(30deg);
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">你好啊</div>
    </div>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：

Ⅱ、透视点的位置：perspective-origin: 102px 102px;

其一、代码为：

javascript 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_透视点的位置</title>
    <style>
        .outer {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            margin: 0 auto;
            margin-top: 100px;
            /* 开启3D空间 */
            transform-style: preserve-3d;
            /* 设置景深（有了透视效果，近大远小） */
            perspective: 500px;
            /* 设置透视点的位置(即：透视效果的中心点，是可以左右上下移动的) */
            perspective-origin: 102px 102px;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
            transform: rotateX(45deg);
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">你好啊</div>
    </div>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：

Ⅲ、位移：transform: translate3d(50%,50%,100px)

其一、代码为：

javascript 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_位移</title>
    <style>
        .outer {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            margin: 0 auto;
            margin-top: 100px;
            /* 开启3D空间 */
            transform-style: preserve-3d;
            /* 设置景深（有了透视效果，近大远小） */
            perspective: 500px;
            /* 设置透视点的位置 */
            perspective-origin: 102px 102px;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 191, 255, 0.726);
            /* transform: translateZ(150px); */
            /* 此时的 translate3d 是在 3D 空间中进行位移，前两个属性是左右和上下位移，第三个属性是 inner的深度(即：高低/远近的值)*/
            transform: translate3d(50%,50%,100px);
            box-shadow: 0px 0px 10px black;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">你好啊</div>
    </div>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：

Ⅳ、旋转：transform: rotate3d(1,1,1,30deg);

其一、代码为：

javascript 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04_旋转</title>
    <style>
        .outer {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            margin: 0 auto;
            margin-top: 100px;
            /* 开启3D空间 */
            transform-style: preserve-3d;
            /* 设置景深（有了透视效果，近大远小） */
            perspective: 500px;
            /* 设置透视点的位置 */
            perspective-origin: 102px 102px;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 191, 255, 0.726);
            /* transform: rotateX(315deg); */
            /* transform: rotateY(-35deg); */
            /* 此时的 rotate3d 是在 3D 空间中进行旋转，前三个属性是旋转轴的方向向量，第四个属性是旋转角度 */
            transform: rotate3d(1,1,1,30deg);
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">你好啊</div>
    </div>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：

Ⅴ、缩放：transform: scale3d(1.5,1.5,1);

其一、代码为：

javascript 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>05_缩放</title>
    <style>
        .outer {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            margin: 0 auto;
            margin-top: 100px;
            /* 开启3D空间 */
            transform-style: preserve-3d;
            /* 设置景深（有了透视效果，近大远小） */
            perspective: 500px;
            /* 设置透视点的位置 */
            perspective-origin: 102px 102px;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 191, 255, 0.726);
            /* transform: scaleZ(4) rotateY(45deg); */
            /* 此时的 scale3d 是在 3D 空间中进行缩放，三个属性分别表示在 X、Y、Z 轴上的缩放比例，而rotateY(45deg) 是在 Y 轴上旋转，且当值为90deg时，inner 会完全垂直，会完全看不到 inner */
            transform: scale3d(1.5,1.5,1) rotateY(45deg);
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">你好啊</div>
    </div>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：

Ⅵ、多重变换：transform: translateZ(100px) scaleZ(1) rotateY(45deg);

其一、代码为：

javascript 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>06_多重变换</title>
    <style>
        .outer {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            margin: 0 auto;
            margin-top: 100px;
            /* 开启3D空间 */
            transform-style: preserve-3d;
            /* 设置景深（有了透视效果，近大远小） */
            perspective: 500px;
            /* 设置透视点的位置 */
            perspective-origin: 102px 102px;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 191, 255, 0.726);
            /* transform-origin: 202px 180px; */
            /* transform: rotateX(-45deg); */
            /* 此时的多重变换中的 transform 的第一个属性是 translateZ(100px) 表示在 Z 轴上位移 100px(垂直平面移动)，第二个属性是 scaleZ(1) 表示在 Z 轴上不缩放，第三个属性是 rotateY(45deg) 表示在 Y 轴上旋转 45deg */
            transform: translateZ(100px) scaleZ(1) rotateY(45deg);
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">你好啊</div>
    </div>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：

Ⅶ、背部可见性：backface-visibility: hidden;

其一、代码为：

javascript 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>07_背部可见性</title>
    <style>
        .outer {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            margin: 0 auto;
            margin-top: 100px;
            /* 开启3D空间 */
            transform-style: preserve-3d;
            /* 设置景深（有了透视效果，近大远小） */
            perspective: 500px;
            /* 设置透视点的位置 */
            perspective-origin: 102px 102px;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: orange;
            transform: rotateY(0deg);
            /* 此时的 backface-visibility: hidden; 表示隐藏元素的背面，即当元素旋转到背面时，不会显示出来(即：当 transform: rotateY(0deg); 的 0deg 为 -90deg 到 90deg 之间时，inner 会不可见) */
            backface-visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">你好啊</div>
    </div>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：

Ⅷ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！

其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！

其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

其四、再有兴趣的话，也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482

相关推荐
anOnion3 小时前
构建无障碍组件之Grid Pattern
前端·html·交互设计
狮子座的男孩3 小时前
解决：使用Burp Suite工具实现防重放攻击的过程及遇到的代理等问题
经验分享·web开发·工具·代理·burpsuite·网络开发·防重放攻击
2601_967212723 小时前
高防护轨道式插座安全结构与工程适配技术说明
大数据·经验分享·安全
xy34536 小时前
Axure 9.0 内联框架加载方式
前端·ui·html·axure·原型·产品设计
速德瑞仪器8 小时前
如何精准把控紫外能量，选择合适的UV能量计
经验分享·紫外辐照计
lazy H8 小时前
【计算机网络】第 5 篇：TCP 和 UDP 有什么区别？从 Java 后端场景理解两种传输协议
经验分享·后端·网络协议·tcp/ip·计算机网络·1024程序员节
奶酪博士11 小时前
【1024快乐】用HTML写一个本地版心愿墙页面
html·1024程序员节
思码梁田11 小时前
CSS 浏览器厂商前缀：从「写 5 遍」到现代自动化兼容
前端·css·css3·border-radius·1024程序员节·box-shadow·厂商前缀
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02如何新建文件夹？ 电脑新建文件夹的4种方法03GitHub 镜像站点04历年考研数学一、数学二、数学三真题试卷及答案PDF05几个好用的ip纯净度检测网站06苹果iPA游戏软件资源下载网站07ai安全工具:CyberStrikeAI安装部署与使用08昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战09乙二醇水溶液物性参数10「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会