2

transform 字面上的意思就是 使改变外观、改变形态

在css3中transform主要包括以下几种

1.旋转 rotate

2.倾斜 skew

3.缩放 scale

4.移动 translate

下面我们就一起来看看transform的rotate、skew、scale、translate具体如何实现。

语法

transform:none

transform:rotate | skew | scale | translate

none:表示不进行变换

表示一个或多个变换函数,空格分开,意思就是我们同时对一个元素进行transform的多种属性操作,使用多个属性时需要有空格隔开

一、旋转rotate

transform:rotate();
旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”

rotate()方法,
通过指定的角度参数对元素指定一个2D rotation(2D旋转)

在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

图1

下面我就做一个“福字”例子

html


<div class="box">

    <div class="box1">

        福

    </div>

</div>    

css


<style>
    html,body{
        height: 100%;
        margin: 0;
        padding: 0;
        position: relative;
    }
    .box{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        left:calc(50% - 50px);
        top:calc(50% - 50px);
                
        transform: rotate(45deg);
    }
    .box .box1{
        font-size: 50px;
        font-weight: bold;
        text-align: center;
        line-height: 100px;
                
        transform: rotate(135deg);
    }
</style>

例:

图片描述

二、倾斜 skew

倾斜具有三种情况

skew(x,y)使元素在水平和垂直方向同时倾斜(X轴和Y轴同时按一定的角度值进行倾斜变形);

图片描述

skewX(x)仅使元素在水平方向倾斜变形(X轴倾斜变形);

图skewX

skewY(y)仅使元素在垂直方向倾斜变形(Y轴倾斜变形)

图skewY

三、缩放 scale

缩放scale和倾斜skew是极其相似,也具有三种情况

scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放);

图scalex-y

scaleX(x)元素仅水平方向缩放(X轴缩放);

图scaleX

scaleY(y)元素仅垂直方向缩放(Y轴缩放)

图scalexY

但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。

四、移动translate

移动translate和skew、scale一样同样具有三种情况

translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);

图translatex-y

translateX(x)仅水平方向移动(X轴移动);

图translateX

translateY(Y)仅垂直方向移动(Y轴移动)

图translateY

以下列出了所有的转换属性

图3

2D转换方法

图4

如果文中有不妥或者错误的地方还望高手的您指出,以免误人子弟。

如果您有更好的建议,不如留言一起讨论,共同进步! 再次感谢您耐心的读完本篇文章。

vx:bsl521921


酷酷的long
27 声望2 粉丝

« 上一篇
Grid布局
下一篇 »
过渡和动画