CSS 2D转换例子

html中固定代码

<div id="d1">参考元素</div>
<div id="d2">转换元素</div>

css中固定代码

#d1,#d2{
    width:200px;
    height:200px;
    border:1px dotted #000;
    /*绝对定位*/
    position:absolute;
    top:150px;
    left:400px;
}
#d2{
    border:1px solid #f00;
    background:#ccc;
    opacity:0.7;
}

---

如果让#d2元素实现位移，则增加如下代码

/*转换效果*/
#d2{
    /*1、位移*/
    transform:translate(50px,50px);
}

如果让#d2元素实现缩放，则增加如下代码

/*转换效果*/
#d2{
    /*2、缩放*/
    transform:scale(-2);
}

如果让#d2元素实现平移加旋转，则增加如下代码

/*转换效果*/
#d2{
    /*3、旋转*/
    transform:translate(50px) rotate(45deg);
}

如果让#d2元素改变旋转中心并旋转，则增加如下代码

/*转换效果*/
#d2{
    /*改变转换原点*/
    transform-origin:left top;
    /*旋转*/
    transform:rotate(45deg);
}

如果让#d2元素倾斜，则增加如下代码

/*转换效果*/
#d2{
    /*4、倾斜*/
    transform:skewX(45deg);
}