css3中的变形transform

jiezi

6 年前

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 的多种属性操作，使用多个属性时需要有空格隔开

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

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

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

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

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(x,y) 使元素在水平和垂直方向同时倾斜（X 轴和 Y 轴同时按一定的角度值进行倾斜变形）；

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

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

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

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

scaleX(x) 元素仅水平方向缩放（X 轴缩放）；

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

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

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

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

translateX(x) 仅水平方向移动（X 轴移动）；

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

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

2D 转换方法

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

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

vx:bsl521921

css3中的变形transform

一、旋转 rotate

二、倾斜 skew

三、缩放 scale

四、移动 translate