3d效果

3d嘛，就是比2d多一d，简单点讲，就是多了一个z轴。至于3d的平移旋转和缩放，和2d里的属性以及属性值完全一样。不过需要注意的是想要3d效果，这三个属性不能少第一：加景深perspective: 1200px;注意啊，这个不是加在需要展示的3d元素上，是要加在该元素的父元素上面，一般取值800-1200px，也可以取更多，但是不推荐嗷。第二：transform-style：preserve-3d;这句呢代表在3d空间中展示，如果没加这一句呢，是没有效果的第三：加一个点来观察perspective-origin: 50% 50%;当然啊，这个50%是常规取值，也可以取别的值。现在讲一下注意点了众所周知啊，3d的平移之类的属性和2d里的完全一样那么下面的知识点要记住：1.transform: translateX(像素值); 水平方向移动，正值向右，负值向左 transform: translateY(像素值); 垂直方向移动，正值向下，负值向上 transform: translateZ(像素值); z轴方向移动，正值距离眼睛更近，负值距离眼睛更远 transform: translate3d(水平方向像素值, 垂直方向像素值, z轴方向像素值); 简写 我更偏向与这个简写但是想要用简写要熟记正负值的移动方向哦。