CSS3實現圖片翻轉效果
阿新 • • 發佈:2019-02-02
- 直接上程式碼看效果
html:
<div class="father">
<div class="before">正面</div>
<div class="after">反面</div>
</div>
css樣式:
.father{ width: 300px; height: 200px; position: relative; transition: all 1s linear; transform-style: preserve-3d; } .before,.after{ width
: 300px; height: 200px; position: absolute; top: 0; left: 0; } .before{ background: red; z-index: 222; } .after{ background: lightblue; transform: rotateX(-180deg); } .father:hover{ transform: rotateX(180deg); } ```` ps:1. 若缺少transform-style:preserve-3d;圖片翻轉效果就無法實現,實現翻轉的關鍵 2. transform-style屬性需要配合transform屬性使用,預設值是flat(子元素保留其3D位置。在2D平面呈現);preserve-3d(子元素保留其3D位置)。