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

html-css023

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便诞生了。

你的代码里面只有位置移动的top,left。没有写旋转的代码。

在动画帧时加入rotate(角度)就可以旋转并移动，可以参考下面代码。

相关示例如下：

<style>

.ani{animation:box 1s linear 0s infinitewidth:100pxheight:100pxbackground:greenborder-radius:50%}

@keyframes box{0%   {transform:rotate(0deg)translate(0,0)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)translate(-300px,0)}75%{transform:rotate(270deg)}100% {transform:rotate(360deg)translate(0,0)}}

</style>

<div class="ani"></div>

CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。