3分钟搞懂CSS3 transform属性

欢迎光临我的博客拓跋的前端客栈,这个是原文地址。如果您发现我文章中存在错误,请尽情向我吐槽,大家一起学习一起进步φ(>ω<*)


CSS transform 属性允许你修改CSS视觉格式模型的坐标空间。使用它,元素可以被转换(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)。

首先有个直观的印象,接下来放大招了~

transform转换.png

怎么样,是不是很直观?如果图片不清晰,在图片上点击右键-“在新标签页中打开图片”,然后在图片上点放大镜就可以查看原图了。

接下来有更直观的,我手写了一个简单的transform体验器,自己尝试一下吧:

transform体验器

不知道你搞懂了吗?

PS:

  • transform是一个理解上很简单,使用起来却很有难度的属性。短时间内能理解80%就不错了,想完全掌握还需要多多练习。
  • 本例中为了尽可能缩短篇幅,没有涉及到transform中matrix部分和rotate3d的部分,想要继续深入的话可以自行查找资料学习。
  • translateZ()是一个很特别的属性,需要结合perspective(透视)来理解。perspective可以简单理解为视点与屏幕之间的距离。当未设置perspective属性时,translateZ()的变化不会有任何影响。而设置perspective以后,translateZ()就符合“近大远小”的规律,Z轴上离你越近,图形显示越大。直到大过perspective值的时候,你就看不见了,这时候你就可以理解为元素到你“脑后”去了,人理所当然的看不见脑后的东西。
  • skew比较难搞懂,直接在图里用文字很难描述清楚。这里引用知乎-css3中-webkit-transform 的 skew 如何使用?中Kori Lee的回复比较容易理解
skew.png

推荐阅读更多精彩内容

  • CSS里transform变形这个属性有点学习难度,尤其在CSS3里加上了3D效果之后,2维变3维学习成本更是成倍...
    张歆琳阅读 18,334评论 5 70
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 779评论 0 3
  • CSS里transform变形这个属性有点学习难度,尤其在CSS3里加上了3D效果之后,2维变3维学习成本更是成倍...
    BULL_DEBUG阅读 268评论 0 1
  • 一、写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容。看过海贼王的都知道,带D的家伙...
    MrZengB阅读 688评论 1 9
  • 当我看到下面这张基本图的时候,我的右侧的浓眉毛不由自主抖动了两下,呵,呵呵~~ rotateY( angle ) ...
    追風逸少丶阅读 550评论 0 2