I'm

Developer, Designer, Photographer

GET IN TOUCH

  • Buk-gu, Busan, Republic of Korea
  • ungdoli0916@naver.com
  • Kakao ID : Ungdoli
Your message has been sent. Thank you!
(즐거웅코드) CSS 상하로 뒤집히며 내용이 달라지는 플립박스 구현하기

· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT
2021. 9. 19. 14:25

반응형

[즐거'웅'코드] 목차

  1. 예제 소스
  2. 구현 예시
예제 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
<style>
    .flipBox {
        position: relative;
        display: inline-block;
    }
 
    .flipBox .outer {
        width: 300px;
        height: 200px;
    }
 
    .flipBox .outer .inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.8s;
        transform-style: preserve-3d;
    }
 
    .flipBox .outer:hover .inner {
        transform: rotateX(180deg);
    }
 
    .flipBox .outer .inner .content.front,
    .flipBox .outer .inner .content.back {
        position: absolute;
        width: 100%;
        height: 100%;
    }
 
    .flipBox .outer .inner .content.front {
        background-color: #BBBBBB;
    }
 
    .flipBox .outer .inner .content.back {
        background-color: #1E90FF;
        color: white;
        transform: rotateX(180deg);
    }
</style>
 
<div class="flipBox">
    <div class="outer">
        <div class="inner">
            <div class="content front">
                <h2>Front Side</h2>
            </div>
            <div class="content back">
                <h2>Back Side</h2>
            </div>
        </div>
    </div>
</div>
구현 예시
반응형
저작자표시

'· 즐거'웅' 코드 (Source) > HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

(즐거웅코드) 자바스크립트 단순한 progressbar 구현하기  (0) 2021.09.21
(즐거웅코드) 제이쿼리 스크롤 업/다운 방향 체크하기  (0) 2021.09.20
(즐거웅코드) CSS 좌우로 뒤집히며 내용이 달라지는 플립박스 구현하기  (0) 2021.09.18
(즐거웅코드) CSS 오른쪽에서 왼쪽으로 이동하며 페이드인(fade in) 되는 애니메이션  (0) 2021.09.17
(즐거웅코드) CSS 왼쪽에서 오른쪽으로 이동하며 페이드인(fade in) 되는 애니메이션  (0) 2021.09.16

관련글

댓글 0

티스토리툴바