css旋转和动画

1、css实现2d旋转：

2d的方法有，会影响该元素的全部zi'yuan'su

• translate()
• rotate()
• scale()
• skew()
• matrix()

translate()

经过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

.demo{

transform: translate(10px,20px);

}

rotate()  经过rotate()方法能够将元素进行旋转正数时顺时针，负数是逆时针。该方法旋转会将以前使用translate方法平移的位移也给一样旋转

.demo{

transform: rotate(30deg);

}

scale()   经过 scale() 方法，元素的尺寸会增长或减小，根据给定的宽度（X 轴）和高度（Y 轴）参数：元素的边框和里面的字体都会同事增长或减小。能够是负数。负数会改变里面字体的显示（若是x为负数  则左右互反，若是y为负数，则上下互反）；

.demo{

transform: scale(2,4);

}

skew() 经过skew（）方法  能够将元素按照给定的参数（x轴和y轴）进行翻转，正数为顺时针，负数为逆时针

.demo{

transform: skew(30deg,20deg);

}

matrix()

matrix() 方法把全部 2D 转换方法组合在一块儿。

matrix() 方法须要六个参数，包含数学函数，容许您：旋转、缩放、移动以及倾斜元素。

 

2、css实现3d旋转：

rotateX() 方法

经过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

.demo{

transform: rotateX(120deg);

}

rotateY() 方法

经过 rotateY() 方法，元素围绕其 Y轴以给定的度数进行旋转。

.demo{

transform: rotateY(120deg);

}

3、css实现动画

使用css3的animation和@keyframes  实现css动画效果：

animation：至少规定动画名称和动画时间（默认是0）  才能让动画起效果

animation两种使用方式：

一、：

animation-name: myfirst;//动画名称
animation-duration: 5s;//规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function: linear;//规定动画的速度曲线。默认是 "ease"。

linear	动画从头至尾的速度是相同的。
ease	默认。动画以低速开始，而后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中本身的值。可能的值是从 0 到 1 的数值。

animation-delay: 2s; //可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。   若是是负值  表明跨越了动画的前面一段时间
animation-iteration-count: infinite;// 动画播放的次数   默认值是 1 ；infinite是能够无限次播放
animation-direction: alternate; //规定动画是否在下一周期逆向地播放。默认是 "normal"。  normal是正常播放   alternate是动画应该轮流反向播放  
animation-play-state: running; //规定动画是否正在运行或暂停。默认是 "running"。   running是正在播放  paused  是暂停

二、：

animation: myfirst 5s linear 2s infinite alternate;

@keyframes:    用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

                         0% 是动画的开始，100% 是动画的完成。

                        为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

.demo{

animation:myfirst 5s;

}

规则定义方式一：

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

规则定义方式二：

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}