CSS3(2D转换)

2D转换
平移
这是移动x,y轴,平移

transform: translate(x,y);

可以分开写:

.box{
transform:translateX();
transform:translateY();
}

旋转:旋转45度,顺时针为正

.box{
transform: rotate(45deg);
}

缩放:缩放宽高

.box{
transform: scale(x,y);
}

缩放倍数

.box{
transform: scale(1.1);
}

动画
首先定义动画:@keyframes myfirst

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

调用动画:

动画名称:animation-name: myfirst;

动画时间: animation-duration: 2s;

div
{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
 
}