css3的2D转换

CSS3的2D转换用transform来实现

1.rotate()   /*通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。*/

2.scal()   /*通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数*/

3.skew()   /*通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数*/

4.tanaslate() /*通过 translate() 方法，  元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数*/  相当于relative定位

<style>

#kuang{
    height:50px;
    width:100px;
    border:1px solid red;
    background-color:#C3F;
    }
#kuang11{
    height:50px;
    width:100px;
    border:1px solid red;
    background-color:#6F0;
    margin-top:50px;
    transform:rotate(30deg)
    }
#kuang12{
    height:50px;
    width:100px;
    border:1px solid red;
    background-color:#C00;
    margin-left:150px;
    transform:skew(20deg,40deg)/*表示围绕x轴旋转20度，围绕y轴旋转40度*/
    }
#kuang13 {
    height:50px;
    position:relative;
    width:100px;
    border:1px solid red;
    position:relative;
    background-color:#60C;
    margin-top:100px;
    margin-left:100px;
    transform:scale(2,3)}/*表示宽度是之前的2倍，高度是之前的3倍*/
#kuang14{
    height:50px;
    width:100px;
    position:relative;
    border:1px solid red;
    background-color:#60F;
    transform:translate(50px,100px)}

</style>
<body>


<div id="kuang"></div>
<div id="kuang11"></div>
<div id="kuang12"></div>
<div id="kuang13"></div>
<div id="kuang14"></div>
</body>

效果如图所示：

posted on 2016-12-08 15:22  霸道小豆丁  阅读(180)  评论(2)  编辑  收藏  举报

导航