transform属性——css3变形效果2D

版权声明:本文的原作者 http://blog.csdn.net/mooncom/article/ ,支持原著,拒绝盗版。 https://blog.csdn.net/MOONCOM/article/details/54564573
一、transform           该属性允许我们对元素进行移动、缩放、旋转或倾斜
transform的属性值如下所示:
1、none                    无变换

2、translate               可使用长度值或百分数值,在水平方向、垂直方向或两个方向上
translateX                 平移元素
translateY
eg. div{
        transform:translate(200px,200px);    //向右下移动200px,类似于相对定位
    transform:translateX(200px);
    transform:translateY(200px);
}

3、scale[skel]             可使用数值,在水平方向、垂直方向或两个方向上缩放元素
scaleX
scaleY
eg. div{
        transform:scale(1.5);       //元素放大为原来的1.5倍
    transform:scaleX(1.5);
    transform:scaleY(1.5);
}

4、rotate                  可使用角度值,旋转元素
eg. div{
        transform:rotate(-45deg);    //元素以中心为点,旋转-45度。
}

5、skew[skju]              可使用角度值,在水平方向、垂直方向或两个方向上使元素倾斜
skewX                      一定的角度
skewY
eg. div{
        transform:skew(45deg,20deg);  //X、Y轴分别倾斜45度、20度
    transform:skewX(45deg);
    transform:skewY(45deg);
}

6、matrix                  4~6个数值,逗号隔开,指定自定义变换
通过六个数值指定矩形,其内部公式计算较为复杂,详情百度

不同的值可以累计,通过空格分隔
eg. div{
        transform:rotate(-45deg) scale(1.5);
}

二、transform-origin   改变元素变形的基准点,默认是元素的中心位置,如果改变了基准点。
它就会按照这个基准点进行变形。
属性值可以使用关键字,也可以使用百分数和具体值
关键字如下:
1、指定x轴的位置     left、center、right
2、指定y轴的位置     top、center、bottom
eg. div{
        transform-origin:left top;
    transform-origin:0px 0px;
    transform-origin:0% 0%;
}

注意:transform和transform-origin要求的版本比较高,所以除了标准的,最好写上带前缀的。

应用场景:页面上有几个像框,用户点击像框,像框以左上角为基准,实现掉落的动画展示。


最后:本篇博客只是错略的解释了一下transform属性,更详细的解析请看另一篇博客:CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

展开阅读全文

没有更多推荐了,返回首页