移入時(shí)翻轉(zhuǎn)是一種常見的前端效果，它可以通過(guò)CSS的transform屬性實(shí)現(xiàn)。下面讓我們一起來(lái)學(xué)習(xí)如何用CSS實(shí)現(xiàn)移入時(shí)翻轉(zhuǎn)效果。

/* HTML結(jié)構(gòu) */
<div class="flip-box">
<div class="flip-box-front">
<p>正面內(nèi)容</p>
</div>
<div class="flip-box-back">
<p>背面內(nèi)容</p>
</div>
</div>
/* CSS樣式 */
.flip-box {
position: relative;
width: 200px;
height: 200px;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #ffffff;
}
.flip-box-back {
background-color: #d4d4d4;
transform: rotateY(180deg);
}
.flip-box:hover {
transform: rotateY(180deg);
}

代碼中，我們首先定義了一個(gè).flip-box類來(lái)表示整個(gè)翻轉(zhuǎn)效果的容器。該容器需要設(shè)置position為relative，因?yàn)楹竺鏁?huì)有兩個(gè)子元素需要絕對(duì)定位。另外，width和height也需要設(shè)置，決定了容器的大小。

接下來(lái)，我們?yōu)閒lip-box-front和flip-box-back分別定義了樣式。這兩個(gè)子元素都需要設(shè)置為絕對(duì)定位，并且寬度和高度都為100%。但是，由于我們要實(shí)現(xiàn)翻轉(zhuǎn)的效果，需要設(shè)置backface-visibility為hidden，防止出現(xiàn)翻轉(zhuǎn)時(shí)的閃爍問(wèn)題。

其中，flip-box-front表示正面內(nèi)容，flip-box-back表示背面內(nèi)容。背面內(nèi)容需要添加一個(gè)transform: rotateY(180deg)的樣式，讓其旋轉(zhuǎn)180度，隱藏在正面內(nèi)容之后。

最后，在flip-box:hover的偽類下，我們將整個(gè)容器翻轉(zhuǎn)，即transform: rotateY(180deg)。這樣當(dāng)鼠標(biāo)移入容器時(shí)，整個(gè)容器會(huì)旋轉(zhuǎn)，正面內(nèi)容會(huì)隱藏，背面內(nèi)容會(huì)顯示出來(lái)。