CSS3动画中怎么一边移动一边旋转?

html-css014

CSS3动画中怎么一边移动一边旋转?,第1张

你的代码里面只有位置移动的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(标准通用标记语言的一个子集)等文件样式的计算机语言。

方法:transform:rotate(45deg)

transform是转换的意思,里面有矩阵属性,X,Y,Z轴的变换等。

rotate用的是他的旋转属性45deg,就是旋转45度

例子:

html:<div class="byl"></div>

css:.byl{width:100pxheight:100pxbackground:#ddd-webkit-transform:rotate(45deg)}

使用CSS3 transform 属性设置元素旋转。

定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

语法:transform: none|transform-functions

可能值

实例 旋转 div 元素:

div

{

transform:rotate(7deg)

-ms-transform:rotate(7deg) /* IE 9 */

-moz-transform:rotate(7deg) /* Firefox */

-webkit-transform:rotate(7deg) /* Safari 和 Chrome */

-o-transform:rotate(7deg) /* Opera */

}

浏览器支持 

      Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。

Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

Opera 只支持 2D 转换。