乐趣区

关于css: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 轴方向像素值); 简写 我更偏差与这个简写
然而想要用简写要熟记正负值的挪动方向哦。

退出移动版