☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 26 _ 마우스오버 효과④

조반짝 2023. 6. 13. 10:43
728x90
반응형

이미지 회전 효과

html 골격 만들어주기

 

#wrap

.effect ho1 > figure > img = figcaption > h3 = p

.effect ho2 > figure > img = figcaption > h3 = p

css 

reset 넣어주기

이미지 사이즈 100% 로 넣어주고 ho1 사이즈와 마진 넣어주기

이미지 양면으로 합쳐주기

피그캡션과 p 태그 수정

ho1- front , back 한번에 style 넣어주기

.front > figure 로 변경하면 한번에 스타일을 적용할 수  있다.

이미지 front 앞면 돌려주기

이미지 back 뒷면 돌려주기

●backface-visibility : hidden;

뒷면 가려주기

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>마우스오버효과 4</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id="wrap">
        <div class="effect ho1">
            <figure class="front">
                <img src="./img/img01.png" alt="거실이미지1">
                <figcaption>
                    <h3>mosue hover</h3>
                    <p>마우스 오버효과 앞면입니다.</p>
                </figcaption>
            </figure>

            <figure class="back">
                <img src="./img/img02.png" alt="거실이미지2">
                <figcaption>
                    <h3>mosue hover</h3>
                    <p>마우스 오버효과 뒷면입니다.</p>
                </figcaption>
            </figure>
        </div>
        <div class="effect ho2">
            <figure class="front">
                <img src="./img/img03.png" alt="식물이미지">
                <figcaption>
                    <h3>mouse hover_상하회전</h3>
                    <p>마우스 오버효과 앞면입니다.</p>
                </figcaption>
            </figure>
            <figure class="back">
                <img src="./img/img04.png" alt="라일락이미지">
                <figcaption>
                    <h3>mouse hover_상하회전</h3>
                    <p>마우스 오버효과 뒷면입니다.</p>
                </figcaption>
            </figure>
        </div>
    </div>
</body>
</html>

css

@charset "utf-8";

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img{
    display: block;
}

body{
    height: 100vh;
    background-color: #2c5364;
}

#wrap{
    height: 100vh;
    /* 가운데 정렬 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ho1 */

#wrap .ho1{
    width: 400px;
    height: 300px;
    margin: 10px;
    position: relative;
}
#wrap .ho1 .front{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;

    /* display: none; */

    /* 이미지 앞면 돌려주기 */
    transform: rotate(0deg);
    transition: all 0.5s;
    backface-visibility: hidden;
    /* 뒷면 숨겨주기 */
}
#wrap .ho1 figure img{
    width: 100%;
}
#wrap .ho1 figure figcaption{
    /* 피그캡션 수정 */
    position: absolute;
    left:0;
    bottom: 0;
    background-color: rgba(255,255,255,0.5);
    width: 100%;
    padding: 20px;
}
#wrap .ho1 figure figcaption h3{
    text-transform: uppercase;
    /* 대문자 변경 */
    font-size: 24px;
}
#wrap .ho1 figure figcaption p{
    font-size: 20px;
    margin-top: 5px;
    /* h3 과 p 사이 줄간격 */
}

#wrap .ho1 .back{
    position: absolute;
    left:0;
    top: 0;
    z-index: 9;

    /* 이미지뒷면 뒤집어 보이게하기 */
    transform: rotateY(180deg);
    transition: all 0.5s;
    /* ho1 back 뒷면 가려주기 */
    backface-visibility: hidden;
}
#wrap .ho1 .back img{
    width: 100%;
}
#wrap .ho1 .back img figcaption{
    
}
#wrap .ho1 .back img figcaption h3{}
#wrap .ho1 .back img figcaption p{}


#wrap .ho1:hover .front{
    /* 앞면 y축으로 돌려주기 */
    transform: rotateY(180deg);
}

#wrap .ho1:hover .back{
    /* 뒷면 y축으로 돌려주기 */
    transform: rotateY(0deg);
}

/* ho2 */

#wrap .ho2{
    width: 400px;
    height: 300px;
    margin: 10px;
    position: relative;
}

#wrap .ho2 figure{}
#wrap .ho2 figure img{
    width: 100%;
}
    
#wrap .ho2 figure figcaption{
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.5);
    width: 100%;
    padding: 20px;

}
#wrap .ho2 figure figcaption h3{
    text-transform: uppercase;
    font-size: 24px;
    margin-bottom: 5px;
    /* h3과 p사이에 줄간격 */
}
#wrap .ho2 figure figcaption p{
    font-size: 20px;
}

#wrap .ho2 .front{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;

    transform: rotate(0deg);
    transition: all 0.5s;
    backface-visibility: hidden;
}
#wrap .ho2 .back{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;

    transform: rotateX(180deg);
    transition: all 0.5s;
    backface-visibility: hidden;
}

#wrap .ho2:hover .front{
    transform: rotateX(180deg);
}

#wrap .ho2:hover .back{
    transform: rotateX(0deg);
}
728x90
반응형
저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 28_ 상하 슬라이드 배너 만들기  (0) 2023.06.13
비주얼 스튜디오 코드 27_ 태그 명령 줄여서 쓰기 , 반응형  (0) 2023.06.13
비주얼 스튜디오 코드 25_ 탭 메뉴 ②  (1) 2023.06.12
비주얼 스튜디오 코드 24_ 마우스오버 효과③  (2) 2023.06.12
비주얼 스튜디오 코드 23_ 마우스오버 효과②  (0) 2023.06.12

'☭DEVELOPER/#2 웹개발(자바기반 풀스택)'의 다른글

  • 현재글비주얼 스튜디오 코드 26 _ 마우스오버 효과④

관련글

티스토리툴바