目的：使用transform属性实现元素在空间内的位移、旋转、缩放等效果，多了一个z轴
，z轴正方向指向屏幕外面，3D转换。
- 空间位移
目的：使用translate实现元素空间的位移效果
语法：
Transform：translate3d（x，y，z）
Transform：translateX（值）
Transform：translateY（值）
Transform：translateZ（值）
取值：正负都可以
像素单位
百分比
想要看到z轴的效果必须再加一个属性：
Perspective实现透视效果，在人的视觉效果是看不见z轴的移动，不能看到近大远小；找到父级添加perspective属性，正常的数值是：800-1200；perspective原理是模拟了人眼到屏幕的距离。
- 空间旋转
目的使用rotate实现元素空间旋转
Transform：rotate3d（x，y，z）
Transform：rotate X（值）
Transform：rotate Y（值）
Transform：rotate Z（值）
工作中rotate3D一般不用自定义旋转轴是有点复杂的。
立体呈现（要想实现3D效果这是必须要添加的，不然子级不会出现3D效果）
实现方法:
父级添加transform-style：perspective-3d
使子元素处于正真的3d空间；默认值使flat表示子元素处于2d平面内呈现；
让两个子级在z轴上拉开一定的距离，再让父级旋转，这样就能实现简单的3D旋转。
使用立体实现3D导航效果：
构建一个父级，父级中包含n个小li标签，每个标签中又有n个子级标签用来存储每个面；
之后就是构建出立方体的每一个面（这也是难点和重点）。使用rotate或者之前使用transform-origin属性改变旋转的原点。不让标签按自己的几何中心旋转这样就不需要平移了。
注意事项:平面进行旋转的时候，自己相应的坐标轴也将进行旋转并不是我们数学几何上面说的广义的坐标轴，这里指的是每个标签自己多拥有的坐标轴。
transform: rotateX(-20deg) rotateY(30deg); （能更好的看见立体效果）
- 空间的缩放
使用scale实现空间的缩放效果。
Transform：scale3d（x，y，z）
Transform：scaleX（倍数）
Transform：scaleY（倍数）
Transform：scaleZ（倍数）
扫一扫
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
