tranform-origin( 100px, 100px, 100px )空间旋转中心；center默认值；0，0图片左上角；
transform：
rotate(num deg/num turn(一个turn360度) 角度的值)2d变幻；
升级到3d变幻的时候，不仅要看旋转中心，也要看坐标轴；
rotateX( )
rotateY( )
rotateZ( )
rotate3d( x，y，z，angle角度 );x、y、z是确定一个空间的矢量值，比值很重要，用来设置矢量方向。作为旋转的轴来存在的，后面的度数是你旋转了多少度。
首先要知道什么是矢量/向量？矢量是一个有方向的度量长度的量；rotate3d是要设置矢量的，然后才进行3d旋转的
body{
perspective：800px；就是人的眼睛对于它的像素的一个距离
相当于把子级元素当做3d空间元素，也就是给它添加上了3d空间的视觉，增强空间感；必须在父级上添加
transform-style：preverse-3d；3d堆叠层，有很多层，在每一个层里进行渲染； 必须在父级上添加；
perspective-origin：300px 300px; 设置眼睛的位置，也就是客户端的视觉效果。在父级上添加；
}
元素旋转之后，元素所参照的坐标轴也是跟着一起旋转的。
这样就会造成一种问题，就是旋转的顺序不同，得到的结果也是不一样的。
 <br />**scale**( x, y )大于1的时候，是扩张，小于1的时候是收缩<br />scalex( )：<br />scaley( )：<br />scalez( )：当有它的时候，就应该知道是可以3d变化的<br />scale3d( )：<br />**scale()到底伸缩的是什么？**它伸缩的不是元素本身，而是元素变化坐标轴的刻度；<br />transform： scale(x1, y1) scale(x2, y2)可以叠加操作，不会覆盖的<br />**伸缩的坐标轴，会不会因为旋转而发生变化？**<br />当在trnsform：rotate(45deg) scale(1,2) ：它是会随着旋转之后的轴进行变化；但是transform：scale(1, 2) rotate(45deg)：不会随着旋转之后的轴进行变化。结论：实际上是跟着旋转的；<br />scale( )伸缩过的方向，在这个方向上的影响会一直被保留。
skew( x,y ) 2d变幻，它其实是倾斜的意思，里面的参数是角度默认的角度看是0deg,0deg;
skewx( )；
skewy( )；
skew( );
skew( )倾斜的是元素本身，还是元素的坐标轴？倾斜的是坐标轴；还有注意点就是坐标轴刻度不仅倾斜了，还被拉伸了
matrix() 矩阵函数
特点：1.第一个矩阵的列数 == 第二个矩阵的行数。
2.第二个矩阵有多少列，结果就有多少列；
矩阵就是transform给我们选中的计算规则，我们了解了这个规则之后，根据我们传入的不同数据，得出不同数据。就好比bezier曲线，可以实现好几种变化。比如图像有无数个点组成，我们不论是给它旋转还是平移，针对它的无数个点的一个数学公式的变化，就是说把每个点都加上x、y，相当于每个点都平移了。
矩阵可以让我们设计一些复杂的公式，然后作用到每个点上，可以让这些点发生一些绚丽的效果；比如：镜象效果;
a、b、c、d、e、f 选填的值
x 、 y 要变幻图像的原始坐标
| a, c, e | | x | | ax + cy + e |
| b, d, f | | y |= | bx + dy + f |
| 0, 0, 1 | | 1 | | 0 + 0 + 1 |
**
| 1 0 e | | x | | x + e |
| 0 1 f | | y |= | y + f |
| 0 0 1 | | 1 | | 1 |
matrix( 1, 0, 0, 1, e, f ) === translate( x, y )
matrix ( a, 0, 0, d, 0, 0 )===scale( x, y )
matrix( cos(), sin(), -sin(), cos(), 0, 0 )=== rotate( x，y);
x = cos($)x - sin($)y + 0
y = sin($)x + cos($)y + 0
matrix( 1, tan($), tan($), 1, 0, 0 )
3D:
matrix(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, z, 1 ) 缩放
matrix(x, 0, 0, 0, 0, y, 0, 0, 0, 0, z, 0, 0, 0, 0, 1 ) 平移
translate( x, y) 移动坐标是以transform-origin的值作为定点的位置，参考也是自身；在不知道自身宽高的确切值时候，用position;absolute; left：50%；transforrm: translatex(-50%);就等于 left:(50% - 自身一半宽度)；
translatex( )
translatey( )
translatez( )
translate3d( )
perspective**( )**添加到元素自身上；这个是transform: perspective( )这时候，给每个子元素添加的景深都是一样的。
缺陷：最好添加到开头的位置，因为添加到后面的时候，有的浏览器是不识别的，如果你想调节perspective-origin是调节不了的，它在此时的默认值是center center，没有给你接口让你去调节。这个不常用。
perspective：景深默认值null；
相当于我们和屏幕之间有一定的纵深，我们的视角去看这个东西也等于也是有立体的感觉，增加了立体感。它必须设置到父级上，子元素才能够有影响。我们看到的所有结果，都是这个元素基于屏幕上的投影，比如说这个元素就在屏幕上没有z轴的空间，那我们的视野看到这个元素的投影始终都是这个圆的大小，即便我挪动我的perspective让它变大，那我们看到 屏幕上的这个圆的大小是不变的。
所以说，当perspective不变的时候，我们的元素translatez朝着眼睛方向去移动的时候，我们看到这个物体的视线在屏幕上的投影是会变大的。如果说我们trnslatez设置负的值，屏幕是上的投影显而易见是小的。用的就是投影原理。这个比较常用；景深也是可以叠加的，有时候景深+景深可能会比较立体的。
perspective-origin： center center默认值；
transform-style：flat默认值 ；
preserve3d(保持3d空间，设置之后，就会产生3d堆叠的一个层。比如：现在是一个平面展示一个层，它设置完事之后，让无数的层堆叠起来来展示出来的空间，就能更加的比较真实的立体。因为一旦立体的话相当于在屏幕z轴多出来了很多了很多的层，每一个层 都负责渲染一点，这个样子来渲染的话，才算是真正的立体呈现，元素会创建堆叠的上下文)；一旦给父级（在亲生父级加上）设置上之后，子级就享受优待了子级的渲染区域就变成了了立体的渲染区域；
js中脚本值，凡是有-的后面元素首字母变成大写；this.style.perspectiveOrign= ‘center center’
![RIT(2POIHNV2IVU5O]~KWGQ.png](/uploads/projects/u2043416@dx72p5/524edebc8fe57510031296525dbe2b8a.png)
案例：3d旋转图片墙、立方体:
关于css3课程中照片墙3d旋转的效果中出现的问题说明：
出现的问题：做照片墙3d旋转的demo上，课程中的程序在现在的谷歌浏览器中在访问的时候会出现不正常的旋转效果。
出现的问题原因：讲课时的浏览器机制和目前的谷歌浏览器有差异。
扩展知识：图片在页面渲染的时候会去提取图片的颜色信息（提取的颜色信息不含有alpha通道的值），如果两张图片叠加显示，那么会出现颜色值选择的问题，在谷歌浏览器更新之后，会去选择先提取到的颜色值，因此展示的效果再叠加的部分就是最先出现的图片。
针对这个问题提供的解决方案： 为img标签添加背景颜色或者设置透明度
扩展知识：在渲染页面之前提取颜色的时候，浏览器获取到他的颜色，这个颜色中是含有alpha通道的值，alpha通道的作用是用来记录选区的，对于最终渲染到页面上的颜色有选择性的作用，因此有了这个通道的值，渲染的时候就可以按照正常的含有alpha的值的算法进行计算得到图片重叠的时候的颜色信息了
一旦设置了top方向的50%，它没有变化的话，top失效原因：1.父级没有高度 2.语法错误；
一旦设置了perspective 和 transform-style：preserve-3d； 这个元素就变成了元素的参照物元素，所以说设置高度的时候要另外设置。
backface-visibility： hidden；就是图片背部隐藏
若有收获，就点个赞吧
0 人点赞
