transform属性单独定义和复合写法的区别

我们直接以一个示例开始:
代码


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transform属性单独定义和复合写法的区别</title>
<style type="text/css">
    .box1, .box2, .box3 {
        float:left;
        width:100px;
        height:100px;
        margin:100px;
        background:red;
        transform:rotate(20deg);
    }
    .box1:hover {
        transform:scale(2);
    }
    .box2 {
        background:blue;
        transform:rotate(20deg);
        transform:scale(2);
    }
    .box3 {
        background:green;
        transform:rotate(20deg) scale(2);
    }
</style>
</head>

<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

鼠标未经过红色盒子.png

鼠标经过红色盒子.png

可以看出红色盒子鼠标经过时和蓝色盒子的transform:scale(2);都覆盖了transform:rotate(20deg);属性;
因为transform属性单独定义时,它们其实都是一个系列的属性(都是transform 开头),所以是按照最后定义的属性渲染,要想让属性同时起作用,就要用示例中的box3中的复合写法transform:rotate(20deg) scale(2);,这样就会同时起作用。

当然,
translatex() = translatex(<translation-value>),
skew() = skew(<angle>[,<angle>]?)
也是一样,这里就不多说了。

最后附上一个正确的transform的复合写法:

transform: translate(<translation-value>[,<translation-value>]?)  rotate(<angle>)  scale(<number>[,<number>]?) skew(<angle>[,<angle>]?);
    
   
声明:此文只代表个人见解,只供参考!联系QQ:1522025433

推荐阅读更多精彩内容

  • Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭...
    hzrWeber阅读 21,733评论 0 19
  • byzhangxinxufromhttp://www.zhangxinxu.com 本文地址:http://www...
    凌雲木阅读 5,758评论 0 8
  • 关于css3变形 CSS3变形是一些效果的集合,比如平移、旋转、缩放和倾斜效果,每个效果都被称作为变形函数(Tra...
    hopevow阅读 5,966评论 2 13
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,611评论 0 4
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,731评论 0 11