CSS_文字排版7

文字排版7

HTML

Code

<div class="wrap">
            <div class="container">
                <h1>CSS COKE IS AWESOME</h1>
                <div class="content">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Quam atque laboriosam omnis velit dolorum similique
                        provident veniam, corporis ullam maxime repudiandae
                        quasi mollitia porro magnam tempora id quos beatae
                        saepe?
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Quam atque laboriosam omnis velit dolorum similique
                        provident veniam, corporis ullam maxime repudiandae
                        quasi mollitia porro magnam tempora id quos beatae
                        saepe?
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Quam atque laboriosam omnis velit dolorum similique
                        provident veniam, corporis ullam maxime repudiandae
                        quasi mollitia porro magnam tempora id quos beatae
                        saepe?
                    </p>
                </div>
            </div>
        </div>

CSS

要注意的地方是 h1 旋轉 90 度後的寬、高變化，還有旋轉中心點要中心改變到左上 transform-origin: left top;。

Code

// css reset
* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Noto Sans TC', sans-serif;
}

body {
    // background-color: #edece1;
    box-sizing: border-box;
}

.wrap {
    margin: 100px 0;
}

.container {
    width: 1200px;
    margin: auto;
    display: flex;
    h1 {
        width: 400px;
        // 不要收縮
        flex-shrink: 0;
        // 留白
        padding-left: 15px;
        color: #aaa;
        font-size: 55px;
        transform: rotate(90deg) translateY(-400px);
        // 設定旋轉定位起始點，從中心移至左上
        transform-origin: left top;
    }
    .content {
        width: 800px;
        flex-shrink: 0;
        column-count: 2;
        column-gap: 30px;
        padding: 15px;
        box-shadow: 0 0 30px #ccc;
        p {
            margin-bottom: 1em;
            &:first-child::first-letter {
                font-size: 40px;
                float: left;
                padding-right: 10px;
            }
        }
    }
}

參考：
https://www.youtube.com/watch?v=O6ags2wEGbc&list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&index=26