---
title: 3D变换
date: 2024-06-06T23:51:22Z
lastmod: 2024-06-10T16:55:57Z
---


## 开启3D空间

父元素必须开启3D空间  
​`transform-style`​

1. ​`flat`​:让元素位于此元素的二维平面内(2D空间) --默认值
2. ​`preserve-3d`​:让子元素位于此元素的三维空间内(3D空间)

## 设置景深

指定观察者与z=0平面的距离,能让发生改变的3D元素产生透视效果  
​`perspective`​

1. ​`none`​:不指定透视 --默认值
2. 长度值:指观察者距离z=0平面的距离,不允许负值

## 透视点位置

所谓透视点位置,就是观察者位置,默认的透视点在元素的中心  
​`perspective-origin`​  
第一个像素值越大越往右  
第二个像素值越大越往下  
默认是在最中间  
通常情况下,我们不需要调整透视点位置

## 位移

3D位移是在2D位移的基础上,可以让元素沿z轴位移  
​`transform`​  
​`translateZ`​:设置z轴位移,正值向屏幕外,负值向屏幕里,且不能写百分比  
​`translate3d`​:第一个参数对应x轴,第二个值参数对应y轴,第三个参数对应z轴,且都不能省略

## 旋转

3D位移是在2D位移的基础上,可以让元素沿x轴和y轴旋转  
​`transform`​  
​`rotateX`​:设置x轴旋转角度,需要指定一个角度值(deg),面对x轴正方向,正值顺时针,负值逆时针  
​`rotateY`​:设置y轴旋转角度,需要指定一个角度值(deg),面对y轴正方向,正值顺时针,负值逆时针  
​`rotate3d`​:前面三个值是否开启,0不旋转,1旋转;第四个参数表示旋转的角度,参数不能省略

## 缩放

3D位移是在2D位移的基础上,可以让元素沿z轴缩放  
​`transform`​  
​`scaleZ`​:设置Z轴方向的缩放比例,值为一个数字,1表示不缩放,大于1放大,小于1缩小,如果元素没有厚度,会调整景深  
​`scale3d`​:第一个参数对应x轴,第二参数对应y轴,第三个参数对应z轴,参数不允许省略

## 多重变换

建议最后写旋转

## 背部

设置背部不可见  
​`backface-visibility: hidden`​
