[アニメーション]前後の回転
5334 ワード
html
<div class="wrapper">
<div class="item front">앞</div>
<div class="item back">뒤</div>
</div>
css.wrapper {
position: relative;
width: min-content;
height: min-content;
perspective: 300px; /* 원근법 적용 */
}
.wrapper .item {
width: 100px;
height: 100px;
border: 4px solid red;
box-sizing: border-box;
font-size: 60px;
backface-visibility: hidden; /* 뒤집어진 요소 숨기기 */
transition: 1s;
}
.wrapper .item.front {
position: absolute;
transform: rotateY(0deg);
}
.wrapper:hover .item.front {
transform: rotateY(180deg);
}
.wrapper .item.back {
transform: rotateY(-180deg);
}
.wrapper:hover .item.back {
transform: rotateY(0deg);
}
Reference
この問題について([アニメーション]前後の回転), 我々は、より多くの情報をここで見つけました https://velog.io/@tjdgus3160/애니메이션-앞뒤회전テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol