首页 > 程序开发 > web前端 > HTML/CSS >

CSS32D平移,旋转,缩放,倾斜

2017-09-02

CSS32D平移,旋转,缩放,倾斜。首先,我们先看一看效果:四种最基本的转换:移动(translate)、旋转(rotate)、缩放(scale)、倾斜(skew),混合在一起做复杂变化。知识梳理:

首先,我们先看一看效果:

四种最基本的转换:移动(translate)、旋转(rotate)、缩放(scale)、倾斜(skew),混合在一起做复杂变化

知识梳理:

使用这些操作变化就要使用css属性 transform:

translate(x,y);两个参数x,y ;可以是百分数(%),其他尺寸单位。一个参数没有效果。

rotate(15deg);旋转度数,牵扯到另一个属性transform-origin,改变元素变化的位置。

scale(2,2) 缩放倍数,width和height,当两个参数一样的时候,可以只写一个。

skew(15deg,15deg) 沿X轴倾斜15度,沿Y轴倾斜15度,

通过设置以上这些属性,可以改变元素的位置,变化。但是我们看不出来它的过程,还需要设置属性transition:

transition:
all  //变化元素属性 一般都设置为 all ,不用考虑挨个属性设置
3s   //3s完成, 以秒为单位
ease //变化效果 ease 渐渐变快  linear 
1s ;  //1秒之后执行动画 

通过以上这些可以完成简单的元素变化了

再配合css3 动画可以做出更炫的效果:

使用@keyframes来定义动画,让元素的属性从某个状态变化到另一个状态:

@keyframes myanimate{
    0%{
        width:0;
    }
    50%{
        width:50%;
    }
    100%{
        width:100%;
    }
}

还可以分的更细,加更多的属性进来,
下来使用定义的动画,

div{
    animation:myanimate 3s;
}

设置3s完成这个动画。animation还有其他的属性设置,和transition有相似之处。还可以规定动画播放的次数,是否逆向播放,状态(比如鼠标hover时设置停止播放动画)

相关文章
最新文章
热点推荐