week4 day1 2D和3D的相关知识

今日总结：通过今天一天的学习，主要对2d和3d的知识进行学习，其中包括：2d的位移，2d的缩放、2d的旋转、2d的倾斜。还有部分3d的知识。

2d的位移

2D位移：
transform:translate(x,y);

transform:translateX(x轴移动的距离);
transform:translateY(Y轴移动的距离);
通过位移的知识，我将一张图片和两段话进行渲染，在鼠标没有放到图片上面时，文字信息实在图片外部看不见，而当鼠标悬停，文字信息就会通过位移的方法移动下来。

2d的缩放

2D的缩放：

transform:scale(x,y);
x ， y 这两个参数为一个数字，大于1放大 小于1缩小

transform:scaleX();
transform:scaleY();
通过缩放的知识也是可以做到以下效果，在鼠标没有放到图片上时，图片在整个盒子中显示，而当鼠标悬停时，图片缩小，两个文字信息显示。

2d的旋转

2D的旋转：
transform:rotate(30deg);

transform:rotateX(30deg);
transform:rotateY(30deg);
这回我做的案例类似折扇，大家都知道折扇就是好多相同的扇叶组合在一起，每个扇叶旋转不同的角度得到的，所以依照此思想，我通过建立好多相同标签，并让他们旋转不同角度得到。

在旋转中还有一个很重要的知识点，就是变形原点，通俗的讲就是旋转时旋转的中心点是哪个。
改变变形原点：
transform-origin:x y;
属性值：
left top
10px 20px
10% 20%
center
通过上下左右四个属性值来调整。

2d的倾斜

倾斜：
transform:skew(度数);

指定x,y的倾斜
transform:skewX(度数)
transform:skewY(度数)
倾斜我就简单的把一个长方形的盒子变成了一个比较夸张的平行四边形，
有一点需要知道，skew中的X和Y，如果写的时X，则在X的两条边是不会倾斜的，始终处于平行。
例如下面

3D

2d场景，在屏幕上水平和垂直的交叉线x轴和y轴
3d场景，在垂直于屏幕的方法，相对于3d多出个z轴
Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向。

transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d

其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。 也就是说，如果对一个元素设置了transform-style的值为flat，则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上，而不是它的前面或者后面。如果对一个元素设置了transform-style的值为preserve-3d，它表示不执行平展操作，他的所有子元素位于3D空间中。