CSS3学习笔记——变形处理

2D变形

transform功能：

用来实现文字或图像的旋转、缩放、倾斜与移动的变形效果；可以单独实现效果，也可以对一个元素使用多个变形方法；

1）缩放

scale（缩放倍率）：实现文字或图像的缩放处理；

只有一个参数时，该参数指的是水平和垂直方向缩放相同的倍数，如果是两个参数那么就是分别指水平、垂直各自的缩放倍数；

2）倾斜

skew（30deg,30deg）表示水平方向倾斜30度，垂直方向倾斜30度；

只使用一个参数时，则表示为只在水平方向进行倾斜，垂直方向上不进行倾斜；

3）移动

translate（50px,50px）:表示水平方向上移动50px，垂直方向上一定50px;

只使用一个参数时，则表示为只在水平方向进行移动，垂直方向上不进行移动；

4）旋转

rotate（角度值） 旋转方向为顺时针方向

对一个元素使用多中变形

div{
        width: 300px;
        background-color: yellow;
        text-align: center;
       /*  旋转45度，放大到1.5倍 水平移动150px 垂直移动200px */
        transform:rotate(45deg) scale(1.5) translate(150px, 200px);
}

在使用transform方法进行变形处理的时候，是以元素的中心点为基准点进行变形的。

指定变形的基准点

transform-origin属性，可以改变变形的基准点；

transform-origin:水平方向的位置(值的指定可以为left、center、right) 垂直方向的位置（top、center、bottom）；

<style type="text/css">
div{
        width: 200px;
        height:200px;
        display:inline-block;
}
div#a{
        background-color: pink;
}
div#b{ 
        background-color: green;
        transform: rotate(45deg);
        /* 修改变形基准点 */
        transform-origin: left bottom;
}
</style>
<body>
<div id="a"></div>
<div id="b"></div>
</body>