CSS过渡中的变形效果中的平移translate,旋转,rotate,倾斜,skew怎么搞啊?

html-css077

CSS过渡中的变形效果中的平移translate,旋转,rotate,倾斜,skew怎么搞啊?,第1张

"推荐你个系列的教程吧--《Buid New World》第十一集:使用 CSS 增加过渡和其他效果 平移translate,将元素平行移动,参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

旋转,rotate允许你通过传一个角度值来旋转一个元素。

如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。

倾斜,skew可以将一个对象围绕着x和y轴按照一定的角度倾斜,在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

"

1、新建html文件。

2、创建两个div,并赋予id。

3、为两个div设置宽高和背景,并设置左右浮动。

4、预览效果如图。

5、创建第三个div。

6、为第三个div设置宽高和背景。

7、预览效果如图。

注意事项:

随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。