欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS3 动画制作学习(一)_html/css_WEB-ITnose

程序员文章站 2022-06-12 12:50:48
...
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(, , , , , ) : 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵。这个就是数学的问题了,等用到了在说了吧,不过我觉得是用不到了。

上面提到的基点都是中心点,只有通过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更新了,写博客真痛苦啊,这还是有点直接挪用,向前辈们致敬!!联系去,未完待续.........)