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

相关推荐
爱分享的康康7 小时前
康谋矿山机械多传感器数采方案：矿山自动驾驶数据采集落地实践分析
经验分享
ZhengEnCi9 小时前
登录页电脑端怎么设计才不空：5 种布局方案与可粘贴 AI 提示词
前端·css·设计
光视界13 小时前
从汞灯到 UV-LED：ALE 如何助力光刻机完成环保升级
经验分享
联蔚盘云13 小时前
DevOps 正在从“交付工具”进化为企业级生产力引擎
经验分享
神膘护体小月半17 小时前
css - 元素背景图由 hover 触发，初次加载时闪动的解决办法
前端·javascript·css
八十天环游世界18 小时前
财务自动化项目的ROI怎么测算？要看哪些指标？
经验分享
网安小学生（兼顾数据库版）19 小时前
艾体宝 TrueFoundry 如何让企业 AI 工具集成避免 “孤岛化“？
经验分享·艾体宝·艾体宝it·艾体宝truefoundry
treasure1401 天前
【复古】浅尝Django前后端不分离
前端·css·python·django·bootstrap·html·web
聪明的笨猪猪1 天前
企业知识库AI架构选型：落地导向的架构决策与组件清单
经验分享·面试·架构·embedding·数据库架构
Go Work1 天前
两个等值条件摆着，MySQL 偏要全表扫
经验分享·笔记
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03几个好用的ip纯净度检测网站04微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新05如何新建文件夹？ 电脑新建文件夹的4种方法06GitHub 镜像站点07昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战08蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接09苹果iPA游戏软件资源下载网站10Dify：一站式AI应用开发平台全解析与Windows部署指南