css3动画制作有那么三个属性:transform(变形)、transition(转换)、animation(动画),今天有时间就来学习下transform,毕竟最近碰到它了,觉得这个不会还是不好吧!
这里主要是我记录学习的地方,会查好多人的博客什么的啊,我会列出来,绝不是为了抄袭。
http://www.w3cplus.com(w3cplus非常好的网站,喜欢原味的请去看看)
transform字面意思就是变形的意思。
一、rotate(旋转):
这是个函数?,你需要一个角度参数,如:45deg,这个角度为正时表示顺时针旋转,为负的时候表示逆时针旋转,而这时如果你细心的话一定发现他的旋转点是哪个?其实默认的是中心点,如果想指定这个点,就用到transform-origin,如:transform-origin: 20% 30%;这样。(怎么发现如果在后面还有一个块元素,那么旋转的元素相当于position:absolute;并设置z-index,把后面的一个元素压在下面,回来看下)
二、translate(移动)
translate分为三种情况:translate(x, y)水平和垂直都移动的、translateX(x)水平移动、translateY(y)垂直移动。默认的基准点是元素的中心点,你也可以通过transform-origin来设定。eg. transform: translate(100px, 20px); 记住了这写可都是函数啊!!!!!
三、scale(缩放)
scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放);scaleX(x)元素仅水平方向缩放(X轴缩放);scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。
四、skew(扭曲)
skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)。
五、matrix(矩阵)
matrix(
上面提到的基点都是中心点,只有通过transform-origin来变换的。
1、top left | left top 等价于 0 0 | 0% 0%
2、top | top center | center top 等价于 50% 0
3、right top | top right 等价于 100% 0
4、left | left center | center left 等价于 0 50% | 0% 50%
5、center | center center 等价于 50% 50%(默认值)
6、right | right center | center right 等价于 100% 50%
7、bottom left | left bottom 等价于 0 100% | 0% 100%
8、bottom | bottom center | center bottom 等价于 50% 100%
9、bottom right | right bottom 等价于 100% 100%
其实这个东东也就是学学,毕竟css3正在深入人心,作为一个在一前端为工作的人就应该了解,虽然不一定全用上,但等用上了或者说他已经风靡全球成为普遍的技术的时候,你在来学它也就晚了,所以,我们要在正确的时间做正确的事。(自己在扯淡了)
(总算把transform更新了,写博客真痛苦啊,这还是有点直接挪用,向前辈们致敬!!联系去,未完待续.........)