在CSS的世界里，缩放可是一项神奇的技能！只要使用scale(X,Y)这个函数，就能把网页上的元素放大或者缩小，仿佛施了魔法一样。记住，X和Y分别表示水平和垂直方向的缩放倍数。举个例子，假如你的网页上有个按钮，你可以调整X和Y的数值来控制它的大小，就好像给它披上了一件变大变小的魔法斗篷。当然，如果只填一个值的话，那么这个值就会同时影响到X和Y，让按钮在两个方向上都发生变化。
transform: rotate | scale | skew | translate |matrix;
其实，你猜怎么着？每个元素都有个“心脏”，也就是基点，它决定了缩放和旋转的起点。通常，这个基点就在元素中央。不过别担心，借助transform-origin属性，咱们就能把基点移到别的地方去，这样元素就可以从新地方开始变形，感觉就像换了颗心似的！
水平缩放的秘密
如果你想在水平方向上缩放东西，那得靠scaleX。用它，你可以换个方式让元素变大或变小，但是左右不会变！就像给它戴上了一副神奇的眼镜，只能看水平方向的东西。默认情况下，scaleX的值是(1,1)，也就是说，元素在水平方向上没啥变化。不过，只要你动动手，把这个值调一调，元素马上就能变得不一样！
此外，还有transform-origin这个神器！不论你想把元素从左滑、右移还是中间放大，它都能随手帮你搞定。感觉就像拥有了一种改变元素视角的魔法，让设计变得随心所欲、千变万化~
垂直缩放的艺术
和scaleX一样，scaleY负责元素在纵向方向上的放大缩小。就是给元素穿个魔力裤衩儿，想变大变小随心所欲。不论你是要高个儿还是矮个儿，用scaleY就能搞定。而且，还能用transform-origin调基点位置，让你的设计更有个性！
想一想你的网站导航栏，用scaleY调整它，当你滚屏页面时它会慢慢升高，好像带你进入了新世界一样。这样的动态效果既能抓住眼球，又使页面更有趣味性，还有互动感！
旋转的魔力
另外，CSS还能让元素转动！只要用rotate()函数就能实现。不过得配个角度参数来控制转的角度。顺时针还是逆时针？都行！或者干脆让它转整整360度，翻个个儿也没问题。这不就是给元素施了个魔咒，让它在网页上随心所欲地跳舞~
而且，你能用transform-origin这个功能来改换旋转的起点！这就意味着你可以随心所欲地决定让元素在哪个角上或甚至中心位置开始旋转，创造出各种独特的视觉效果。这种自由度，使得旋转在CSS动画中变得超级炫酷！
扭曲的创意
*top left | left top 等价于 0 0 | 0% 0% *top | top center | center top 等价于 50% 0 *III、right top | top right 等价于 100% 0 *left | left center | center left 等价于 0 50% | 0% 50% *center | center center 等价于 50% 50%（默认值） *right | right center | center right 等价于 100% 50% *bottom left | left bottom 等价于 0 100% | 0% 100% *bottom | bottom center | center bottom 等价于 50% 100% *bottom right | right bottom 等价于 100% 100%
CSS中的扭歪（skew）挺好玩儿的，你可以用skew()这个函数让元素在横着和竖着两个方向上都有点变形，感觉就像施了魔法一样，让东西变得很特别。这种扭歪效果能做出很多好看的外观，让网页看起来更有意思。
更妙的是，skew函数能让你单独地扭曲x轴或者y轴！这样就能让元素在水平或者垂直方向上变形，实现更多微妙的变形效果。这么精细的控制法，使扭曲变得超级实用~设计师们再也不用担心变形问题了！
平移的灵活性
除了大小变化、转圈圈和变形之外，CSS还有个移位功能！通过那个translate(x,y)小函数，你就能让元素随意在网页上跑来跑去，像有魔力一样。这个移位效果能做出超顺滑的动画，让网页更生动有趣。
还有，translate这个功能还能分别搞定x轴和y轴的平移，就是说，你可以让东西只有横着或竖着跑来跑去，打造更细腻的移动感。这么精确的操作方式，使得平移变成了设计师手里的一把利器！
过渡效果的魅力
//Mozilla内核浏览器：firefox3.5+ -moz-transform: rotate | scale | skew | translate ; //Webkit内核浏览器：Safari and Chrome -webkit-transform: rotate | scale | skew | translate ; //Opera -o-transform: rotate | scale | skew | translate ; //IE9 -ms-transform: rotate | scale | skew | translate ; //W3C标准 transform: rotate | scale | skew | translate ;
你知道吗？css里有个神奇的东西叫过渡效果（transition），可以让元素变来变去的时候更顺溜。你只需要使用transition-property这个属性，告诉浏览器要哪几个属性变化时用上过渡效果即可。如此一来，你元素的颜色呀、大小呀、位置啥的，在变化的过程中就能像被施了魔法一样，变得顺滑无比！
transition-property ： none | all | [ ] [ ',' ]*
更妙的是，transition属性还能设定延时（delayed）、持续时间（durated），甚至节奏（比如均匀加速或前面快点后面慢点）。这样就能随心所欲地掌控每个过渡效果的细微之处，让动画效果更贴合你的设计理念。这种精细的调控，使得过渡效果变成了设计师手里的利器。
评论0