3D转换

3D多了一个Z，向外是正值，向里面是负值

# 复合写法

transform: translate3d(20px,20px,10px);
 transform: translate3d(0,20px,10px);

1
2

看了就懂，说啥

# 透视

没有透视是看不到Z的效果的，所以3D一定要加透视属性

距离人眼越近平面成像越大，越远越小

透视属性是给上一级的元素加的，

<div class="box1">
  <div id="three">3d</div>
</div>
<style>
#three{
  width: 200px;
  height: 200px;
  margin-left: 200px;
  background: url("https://img1.baidu.com/it/u=2882854598,1294535828&fm=26&fmt=auto&gp=0.jpg") no-repeat;
  transition: all 2s;
}
.box1{
    //透视的属性加在这里
  perspective: 900px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 旋转

我可以加一个鼠标经过的旋转

这里涉及一个沿着哪一个轴旋转

就像是单杠原理一样

#three:hover{
  transform: rotateX(180deg) ;
}

1
2
3

因为我们加了透视，所以我们在看的时候会有一种3D的效果

### rotate3D

transform: rotate3d(2,1,0,180deg);

这个很简单，就是以坐标之间比例画一条线，然后按那条线旋转

# 3d呈现transform-style

```css transform-style: preserve-3d; ```

表示开启3d呈现

transform-style: flat; 表示不开启

代码要写给父级，影响的是子盒子

编辑

上次更新: 2021/08/13, 23:21:49

← 动画流式布局→