방법 - 3D 플립 박스
CSS로 플립 상자를 만드는 방법을 알아보세요.
플립 박스
효과를 보려면 아래 상자 위로 마우스를 이동하십시오.
수평 뒤집기:
정면
후면
수직 뒤집기:
정면
후면
플립 상자를 만드는 방법
1단계) HTML 추가:
예시
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front
Side</h2>
</div>
<div
class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
2단계) CSS 추가:
예시
/* The flip box container - set the width and height to whatever you want. We
have added the border property to demonstrate that the flip itself goes out of
the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective:
1000px; /* Remove this if you don't want the 3D effect */
}
/* This
container is needed to position the front and back side */
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform
0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal
flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side */
.flip-box-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
수직 뒤집기
수평 대신 수직 뒤집기를 수행하려면 다음 rotateX
대신 방법을 사용하십시오 rotateY
.
예시
.flip-box:hover .flip-box-inner {
transform: rotateX(180deg);
}
.flip-box-back {
transform: rotateX(180deg);
}
참고: 이러한 예는 태블릿 및/또는 휴대전화에서 제대로 작동하지 않습니다.
팁: 회전() 메서드와 같은 2D 변환에 대해 자세히 알아보려면 CSS 2D 변환 자습서로 이동 하십시오.
팁: 3D 변환 에 대해 자세히 알아보려면 CSS 3D 변환 자습서로 이동하십시오 .