이런 효과를 한 번 구현해보자.
<body>
<div class="flipProfile">
<div class="flipProfile__front">
<img src="/dogdog.jpg" alt="dog">
</div>
<div class="flipProfile__back">
<p>응애 나 애기 멍멍이</p>
</div>
</div>
</body>
html은 이렇게 작성했다.
전체 박스 안에 앞면과 뒷면을 각각 만들어주면 된다. 앞면은 굳이 박스로 만들지 않고 img 태그에 바로 클래스를 줘도 상관 없다.
.flipProfile {
display: block;
margin: auto;
width: 300px;
height: 300px;
transform-style: preserve-3d; // 이 박스를 3d로 만들어주세요~
transition: 300ms all ease-in;
}
.flipProfile img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.flipProfile__front {
position: absolute;
z-index: 1;
top: 0px;
width: 100%;
height: 100%;
position: relative;
backface-visibility: hidden; // 뒷면이 안 보이게 해주세요~
}
.flipProfile__back {
position: absolute;
z-index: 0;
top: 0px;
width: 100%;
height: 100%;
transform: rotateY(180deg); // 미리 뒤집어놔야 뒷면으로 뒤집혔을 때 글자가 정상적으로 표시된다.
background-color: blanchedalmond;
border-radius: 50%;
padding-top: 100px;
p {
text-align: center;
font-size: 30px;
}
}
나머지는 다 정렬이나 크기 등에 관련된 것이니 신경 쓸 필요 없고 다음 세가지만 보면 된다.
1. transform-style: preserve-3d;를 부모 박스에 준다. " 이 박스는 이제 양 면이 있는 3d 박스입니다~ "
2. 앞면에 backface-visibility: hidden;를 입력하여 " 이 박스의 뒷면이 보이지 않게 해주세요~ "
3. 그리고 뒷면은 미리 뒤집을 축에 따라 180도 뒤집어놓는다. 그래야 뒤집혔을 때 우리가 원하는 모습으로 뒤집힌다.
.flipProfile:hover {
transform: rotateY(180deg);
}이렇게 해서 뒤집어주면 끝. 아주 간단하다.
'Language & Framework > HTML CSS' 카테고리의 다른 글
| CSS Background-image만 투명하게 만들기 (0) | 2022.05.03 |
|---|---|
| SCSS(SASS) 기초 활용법과 반복문 활용하여 부트스트랩의 row, col 구현하기. 핵심만 간단하게. (0) | 2022.02.12 |
| 구글 폰트? TTF? WOFF? 웹 폰트 적용하는 방법, 그림으로 간단하게 (0) | 2022.02.05 |
| 구시대의 유물? float과 inline-block 활용하여 레이아웃 구성하기 (1) | 2022.01.29 |
| 시맨틱 태그(Semantic Tag)는 왜 필요하고 어떻게 사용할까? 핵심만 간단하게. (0) | 2022.01.05 |
