3d转化

3d转化
3d视距
perspective: 1000px;
加在body：下面所有子元素，形成统一的透视感；
加在各自父亲上：管理下面的子元素形成各自的透视感；
值越小，变化越剧烈；
3d位移
transform: translateX(200px);
transform: translateY(100%);
设置百分比移动的是自身的百分之多少
transform: translateZ(100px);
Z轴没有厚度，设置%不生效
简写
transform: translate3d(100px, 100px, 100px);
3D呈现
transform-style: preserve-3d;
父元素控制子元素是否开启三维立体环境，让子元素做3D转换能有效果；
只要亲生子元素做3D转换，就需要在其父亲上加3D呈现，这样子元素做的3D转换才能被看到
在父亲上加3d呈现
亲生子元素做3D转化，可呈现出来
视距
近大远小，透视感；
body所有的子元素、各自父亲；观测角度不同；
3D呈现
亲生子元素3D转化，可呈现出来
父亲上加；
3d旋转
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
自定义轴线
transform: rotate3d(1, 1, 0, 45deg);
左手工具
左手的拇指指向 某一 轴的正方向；
其余手指的弯曲方向就是该元素 绕着 某一 轴旋转的方向 为顺时针正方向
想方便的观测到如何旋转，要把轴向指向你的眼睛。
3d缩放
transform: scaleX(2);
transform: scaleY(0.5);
Z轴方向没有厚度，不生效
transform: scaleZ(10000);
简写
transform: scale3d(2, 2, 10000000);
3D缩放，相对于自身宽高厚，Z轴缩放不生效，因为没有厚度；
下面子元素、文字、设置CSS属性都会跟着缩放；
3d简写
transform: translateY() rotateX();
注意：旋转会改变轴向，会影响代码的书写；

3d转化

原文：https://www.cnblogs.com/itxcr/p/11600115.html