變形

將元素進行『旋轉』『位移』『縮放』『傾斜』等效果

使用 transform 屬性

旋轉

可將元素進行角度旋轉

使用 transform 屬性來定義 rotate，單位為 deg

宣告

transform: rotate(30deg);

html

<div class="block"></div>
<div class="block rotate"></div>

css

.block {
    width: 100px;
    height: 100px;
    background: #dedede;
    margin: 10px auto;
}

.rotate {
    transform: rotate(90deg);
}

demo

春字

demo

html

<div class="spring">春</div>

css

.spring {
    width: 100px;
    height: 100px;
    background-color: red;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    transform: rotate(135deg);
    margin: 50px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

此時文字因為旋轉的影響，沒有上下顛倒，而是斜了一邊

將 html 結構加工

 <div class="spring">
    <div class="text">春</div>
</div>

上下顛倒的角度為 180deg，目前旋轉 135deg，將剩下的 45deg 補給 .text

.spring .text {
    transform: rotate(45deg);
}

特價條

demo

html

<div class="product-discount">
    <div class="product-image">
        <div>Image</div>
        <div class="discount-bar">off 20%</div>
    </div>
    <div class="content">
        <h3 class="product-title">Product Name</h3>
        <div class="product-description">
            <p>Product description.</p>
            <p>Product description.</p>
        </div>
    </div>
</div>

scss

*,
*::after,
*::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.product-discount {
    margin: 10px auto;
    height: 500px;
    width: 300px;
    background: #dedede;
    padding: 10px;

    .product-image {
        width: 100%;
        height: 200px;
        background: rgb(255, 127, 95);
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;

        .discount-bar {
            position: absolute;
            top: 25px;
            right: -120px;
            background: #fff;
            color: red;
            transform: rotate(45deg);
            width: 300px;
            text-align: center;
            font-size: 14px;
            font-weight: 800;
        }
    }

    .product-title {
        margin: 10px 0;
        font-size: 20px;
        font-weight: 700;
    }

    .product-description {
        line-height: 30px;
    }

}

原點

變形參考點，類似 position 的參考原點概念，預設原點為 x 50%, y 50% (中心點)

宣告

transform-origin: x y;

x 除了使用數值外，也可以使用 left, center, right

y 除了使用數值外，也可以使用 top, center, bottom

demo

位移

可將元素進行位置移動

使用 transform 屬性來定義 translate

宣告

transform: translate(x, y);

demo

與 position offset 差異

translate 會盡量使用 GPU 加速，製作移動影格時，使用 translate 效能會比較好

如果網頁需要支援 IE8 瀏覽器，就只能使用 position offset

兩者可互相搭配使用

縮放

可將元素進行比例縮放

使用 transform 屬性來定義 scale

宣告

transform: scale(2);

超小字

大部分的瀏覽器都有最小字體的限制，scale 可以突破此限制

.super-mini {
    font-size: 10px;
    transform: scale(0.5);
}

demo

特價條圖片放大

demo

.product-discount{
    &:hover {
        .product-image > div:first-child {
            transform: scale(2);
        }
    }
}

傾斜

可將元素進行角度傾斜

使用 transform 屬性來定義 skew

宣告

transform: skew(xdeg, ydeg);

demo