滑過圖片說明文字由外彈進來-我是一個金艾吉

滑過圖片說明文字由外彈進來

滑過圖片說明文字由外彈進來，圖片都被彈開了

重點：

transform-origin: left;; //軸心設在左側
transform: rotateY(90deg);

效果演示：

HTML：

<!doctype html>
<html>
<head>
    <title>滑過圖片說明文字向內彈出來</title>
    <link rel="stylesheet" href="style.css">
</head>
<body id="dailycss_20210723">
    <div class="container">
        <div class="imageBox">
            <img src="https://fakeimg.pl/560x315/93CCC3/ffffff" alt="">
        </div>
        <div class="content">
            <h1>要在就要大幅紛紛同樣</h1>
            <p>
                魯蛇地區網絡允許我來腦袋幾個主角廣場寂寞監控，刪除訓練，隱藏資金一方面，有效廣場。
            </p>
        </div>
    </div>
</body>
</html>

CSS：

#dailycss_20210723 {
    margin: 0;
    padding: 0;
    background-color: #262626;
}

#dailycss_20210723 .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 560px;
    height: 315px;
    background-color: #fff;
    overflow: hidden;
}

#dailycss_20210723 .imageBox {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    transition: 0.5s;
}

#dailycss_20210723 .content {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: #1d304c;
    padding: 40px 20px;
    box-sizing: border-box;
    transform-origin: left;
    transition: .5s;
    transform: rotateY(90deg);
}

#dailycss_20210723 .content h1 {
    margin: 10px 0;
    padding: 0;
    color: #fff;
}

#dailycss_20210723 .content p {
    margin: 0;
    padding: 0;
    color: #fff;
}

#dailycss_20210723 .container:hover .content {
    transform: rotateY(0deg);
}

#dailycss_20210723 .container:hover .imageBox {
    transform: translateX(50%);
}

來源：