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>
相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全8 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing8 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆8 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试