3D转换

特点

  • 近大远小
  • 物体后面遮挡看不见

三维坐标系

  • x轴:水平向右(右正左负)
  • y轴:垂直向下(下正上负)
  • z轴:垂直屏幕(外正内负)

位移

3D移动在2D移动基础上多加了一个z轴
transform:translateX(100px)在x轴上移动
transform:translateY(100px)在y轴上移动
transform:translateZ(100px)在z轴上移动(一般用px单位)
transform:translate3d(x,y,z)其中x y z分别是指要移动的轴的方向的距离

透视

  • 透视(perspective)我们也称为视距:人的眼睛到屏幕的距离
  • 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)
  • 距离视觉点越近的在电脑平面成像越大,越远成像越小
  • 透视单位是像素
  • 透视写在被观察元素的父盒子上
js 复制代码
<style>
        body{
            perspective: 500px;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
  • d:视距
  • z:z轴,物体距离屏幕,z轴越大(正值)我们看到的物体就越大

旋转

3D旋转可以让元素在三维平面内沿着X轴Y轴Z轴或者自定义轴旋转
transform:rotateX(45deg)沿着X轴正方向旋转45度
transform:rotateY(45deg)沿着Y轴正方向旋转45度
transform:rotateZ(45deg)沿着z轴正方向旋转45度
transform:rotate3d(x,y,z,deg)沿着自定义轴旋转deg为角度,不需要沿着哪个轴转哪个轴就赋值为0

左手准则
  • 左手拇指指向轴正方向
  • 其余手指弯曲的方向就是该元素沿着轴旋转的方向(正值)

呈现

transform-style

  • 控制子元素是否开启三维立体环境
  • transform-style:flat子元素不开启3d立体空间,默认
  • transform-style:preserve-3d子元素开启立体空间
  • 代码写给父级,但影响的是子盒子
js 复制代码
<style>
        body {
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            transform-style: preserve-3d;
        }

        .box:hover {
            transform: rotateY(60deg);
        }

        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }

        .box div:last-child {
            background-color: blue;
            transform: rotateX(45deg);
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div></div>
相关推荐
zhanshuo2 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang3 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil5 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录12 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672212 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少17 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile3 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639973 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫