动画的方式理解css中perspective属性

属性的定义

解释中的关键点就是"透视"效果,学过美术的都知道,透视意味着画面看起来更有空间感,更立体.这个属性的作用也是如此.
直接在w3school上模拟一下就会非常直观
网页链接

演示动画

按照上面的代码在网页上稍加更改,就能看到效果了.
以下是值为150

看起来比较正常,明显的透视效果,简单来说就是远小近大

---

以下是值为1000

透视效果非常弱了,因为1000意味着方块离你特别远,虽然有透视效果,但很不明显了.

---

以下是值为70

有一种方块被甩到脸上的感觉…
就是因为它离你太近,所以透视效果非常明显.

总结

透视的意思就是远小近大,可以理解为值越大,你离元素的距离很远,效果越不明显.
值越小则距离元素越近,效果越明显.
这下该明白了吧.
GIF图好像不会动了,自己改代码试试吧.