본문 바로가기

TUTORIAL


CSS Animation

CSS Animation - Hover Effect05

CSS Animation 튜토리얼입니다. CSS3를 이용한 애니메이션과 사이트에 필요한 모션에 대해서 배우는 튜토리얼입니다.


사용프로그램
codepen GO


CSS Reference GO

CSS Animation GO

JS Animation GO

Parallax Animation GO

Codepen Webstoryboy GO

인스타그램 보기 GO

포폴 만들기 스터디 모임 GO


웹 퍼블리셔가 되기 위한 튜토리얼 순서
1. 웹 표준 사이트 만들기(2019) GO
2. 반응형 사이트 만들기(2019) GO
3. 메가박스 사이트 만들기(2019) - 디자인 GO
4. 메가박스 사이트 만들기(2019) - 코딩 GO
...추후 제공

+ 웹디자인 기능사 GO
+ CSS Animation GO
+ Parallax GO
+ Image Slider GO

기본 애니메이션
Basic01 Bar Animation GO
Basic02 Dot Animation GO
Basic03 Wave Animation GO
Basic04 Cube Animation GO
Basic05 Tail Animation GO

HoverEffect01 Animation GO
HoverEffect02 Animation GO
HoverEffect03 Animation GO
HoverEffect04 Animation GO
HoverEffect05 Animation GO

Motion01 Tentacle Animation GO
Motion02 Minion Animation GO
Motion03 Rock Animation GO
Motion04 Rocket Animation GO
Motion05 Rocket(tween) Animation GO

<link href="https://fonts.googleapis.com/css?family=Jua&display=swap" rel="stylesheet">

<div class="hover_wrap">
    <div class="effect">
        <figure class="front">
            <img src="https://tistory2.daumcdn.net/tistory/2933724/skin/images/hover03.jpg" alt="앞면 이미지">
            <figcaption>
            <h3>Mouse Hover</h3>
            <p>마우스 오버 이펙트 앞면입니다.</p>
            </figcaption>
        </figure>
        <figure class="back">
            <img src="https://tistory2.daumcdn.net/tistory/2933724/skin/images/hover04.jpg" alt="뒷면 이미지">
            <figcaption>
            <h3>Mouse Hover</h3>
            <p>마우스 오버 이펙트 뒷면입니다.</p>
            </figcaption>
        </figure>
    </div>
    <div class="effect e2">
        <figure class="front">
            <img src="https://tistory2.daumcdn.net/tistory/2933724/skin/images/hover04.jpg" alt="앞면 이미지">
            <figcaption>
            <h3>Mouse Hover</h3>
            <p>마우스 오버 이펙트 앞면입니다.</p>
            </figcaption>
        </figure>
        <figure class="back">
            <img src="https://tistory2.daumcdn.net/tistory/2933724/skin/images/hover03.jpg" alt="뒷면 이미지">
            <figcaption>
            <h3>Mouse Hover</h3>
            <p>마우스 오버 이펙트 뒷면입니다.</p>
            </figcaption>
        </figure>
    </div>
</div>










    













































body {
    height: 100vh;
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
    font-family: 'Jua', sans-serif;
}

.hover_wrap {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.hover_wrap .effect {
    position: relative;
    width: 400px; height: 300px; margin: 10px;
    perspective: 1000px;
}
.hover_wrap .effect .front {
    position: absolute; left: 0; top: 0; z-index: 10;
    transform: rotateY(0deg);
    transition: transform 1s;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}
.hover_wrap .effect .back {
    position: absolute; left: 0; top: 0;
    transform: rotateY(-180deg);
    transition: transform 1s;
    transform-style: preserve-3d;
}
.hover_wrap .effect img {
    width: 100%; display: block;
}
.hover_wrap .effect figcaption {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%) translatez(100px);
    backface-visibility: hidden;
    text-align: center;
    background: rgba(0,0,0,0.5); 
    padding: 3% 4%;
    box-sizing: border-box;
    color: #fff;
    white-space: nowrap;
}
.hover_wrap .effect figcaption h3 {
    font-size: 30px; padding-bottom: 10px;
}
.hover_wrap .effect figcaption p {
    font-size: 16px;
}

/* Media quary */
@media (max-width:600px){
    .hover_wrap {flex-direction: column;}
}

/* hover Effect */
.hover_wrap .effect:hover .front {
    transform: rotateY(180deg);
}
.hover_wrap .effect:hover .back {
    transform: rotateY(0deg);
}

/* hover Effect2 */
.hover_wrap .effect.e2 .front {transform: rotateX(0deg)}
.hover_wrap .effect.e2 .back {transform: rotateX(-180deg)}
.hover_wrap .effect.e2:hover .front {transform: rotateX(180deg)}
.hover_wrap .effect.e2:hover .back {transform: rotateX(0deg)}