비주얼 스튜디오 코드⑮ 트렌스폼을 이용해서 효과주기

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

비주얼 스튜디오 코드⑮ 트렌스폼을 이용해서 효과주기_2

조반짝 2023. 6. 7. 14:25

728x90

외부 css 사용시

html에 css 링크 꼭 걸어주기

<link rel ="stylesheet" href="./css/style.css">

* web font사용 시 light, normal, bold 가 다 있는 폰트를 사용해야 다양하게 사용할 수 있다.

박스 만들어주기

section으로 만들어주기

01 rotate : 회전

transform: rotate(45deg)

transform: rotateX(45deg)

transform: rotateY(45deg)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <h1>CSS3 Transform</h1>

    <section class="card">
       <article class="box rotate">
            <div class="fill"></div>
       </article>
       <p>rotate(45deg)</p>
    </section>

    <section class="card">
        <article class="box rotateX">
             <div class="fill"></div>
        </article>
        <p>rotateX(45deg)</p>
     </section>

     <section class="card">
        <article class="box rotateY">
             <div class="fill"></div>
        </article>
        <p>rotateY(45deg)</p>
     </section>
     
</body>
</html>

@charset "utf-8";
*,
*::after,
*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #f5f3f4;
    text-align: center;
}

h1{
    color: #666;
    font-weight: 600;
    border-bottom: 1px solid #ccc;
    /*밑 선 넣기*/
    padding-bottom: 10px;
    /*기준점을 잘 생각해서 넣어줘야한다.*/
    margin-bottom: 10px;
    text-align: center;
}

.card{
    margin: 50px;
    background-color: #fff;
    padding: 15px;
    width: 200px;
    height: 200px;
    box-shadow: 0 3px #ddd;
    display: inline-block;
    /*인라인 블럭구조로 변경해서 블럭구조와 옆으로 보내주는 인라인구조로 한다.
    문제는 여백이 생긴다. 정확한 구조를 요하는 부분은 float을 사용한다.*/
}

.card .box{
    width: 100px;
    height: 100px;
    background-color: #ddd;
    margin: auto;
    /*박스를 좌우 중앙으로 보내줘라*/
}

.card .box .fill{
    width: 100%;
    height: 100%;
    background-color: blue;
    opacity: 0.3;
    transition: 0.3s;
}

.card p{
    margin-top: 25px;
    text-align: center;
    /*정중앙에 텍스트가 들어갔다는 것은 p태그가 블럭구조다*/
}

.card .rotate:hover .fill{
    transform: rotate(45deg);
}

.card .rotateX:hover .fill{
    transform: rotateX(45deg);
}

.card .rotateY:hover .fill{
    transform: rotateY(45deg);
}

01 scale : 확대 축소

 <h4>scale : 확대 축소</h4>

     <section class="card">
        <article class="box scale">
             <div class="fill"></div>
        </article>
        <p>scale(2)</p>
     </section>

     <section class="card">
        <article class="box scaleX">
             <div class="fill"></div>
        </article>
        <p>scaleX(2)</p>
     </section>

     <section class="card">
        <article class="box scaleY">
             <div class="fill"></div>
        </article>
        <p>scaleY(2)</p>
     </section>

.card .scale:hover .fill{
    transform: scale(2);
}

.card .scaleX:hover .fill{
    transform: scaleX(2);
}

.card .scaleY:hover .fill{
    transform: scaleY(2);
}

03 translate : 이동하기

transform: translate(45px, 45px)

transform: translateX(45px)

transform: translateY(45px)

04 투영점 지정하기(원근법)

perspective: 투시도

perspective: 300px --> 바라보는 시점에서 300px 떨어져있다

perspective가 적을수록 물체가 커지고 클수록 물체가 작아진다.

perspective : 투시

perspective rotateX

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>투영시점 지정하기(원근법)</title>
    <style>
        body{
            margin: 0 auto;
            width: 600px;
            padding: 40px;
        }

        .wrapper{
            display: inline-block;
            text-align: center;
            width: 180px;
            height: 180px;
            margin-right: 100px;
        }

        .box_01{
            width: 100%;
            height: 100%;
            background-color: #0cb3ee;
        }
        .box_02{
            width: 100%;
            height: 100%;
            background-color: #0cb3ee;
            transform: rotateX(45deg);
        }
       


    </style>
</head>
<body>
    <div class="wrapper">
        <!--기본 박스-->
        <p>기본박스</p>
        <div class="box_01"></div>
    </div>

    <div class="wrapper">
        <!--X축을 회전한 박스-->
        <p>X축을 회전한 박스</p>
        <div class="box_02"></div>
    </div>

    <br><br><br><br><br><br><br>
    <!--ENTER-->

    <div class="wrapper perspective">
        <!--perspective(투영점) 적용해서 X축을 회전한 박스-->
        <p>perspective(투영점) 적용해서 X축을 회전한 박스</p>
        <div class="box_02"></div>
    </div>

</body>
</html>

perspective rotateX

<h4>perpective : 100px</h4>
     
     <div class="perspective_100">
          <section class="card">
               <article class="box rotateX">
                    <div class="fill"></div>
               </article>
               <p>perpective(90deg)</p>
            </section>

            <section class="card">
               <article class="box rotateY">
                    <div class="fill"></div>
               </article>
               <p>perpective(90deg)</p>
            </section>
     </div>

.perspective_100 .box{
    perspective: 100px;
}

origin : 중심점 지정하기

조절점 조절하는 것을 오리진이라한다.

아무지정이 없으면 자동으로 50%,50% 로 나옴

중심점 X,Y (0,0)

중심점 X,Y (100,0)

중심점 X,Y (0,100)

중심점 X,Y (100,100)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>트랜스폼 오리진(중심점 지정하기)</title>
    <style>
       
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            width: 1000px;
            background-color: #f4f3f5;
            margin: 0 auto;
            text-align: center;
        }

        .card{
            width: 200px;
            height: 200px;
            background-color: #fff;
            padding: 15px;
            margin: 20px;
            display: inline-block;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: #ddd;
            margin: 0 auto;
        }

        .fill{
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 255, 0.3);
            transition: all 0.3s;
        }

        p{
            margin-top: 20px;
        }

        .box:hover .fill{
            transform: rotate(45deg);
        }

        .to_0_0{
            transform-origin: 0 0;
        }

        .to_100_0{
            transform-origin: 100% 0;
        }

        .to_0_100{
            transform-origin: 0 100%;
        }

        .to_100_100{
            transform-origin: 100% 100%;
        }


    </style>
</head>
<body>
    <div class="card">
        <div class="box">
            <div class="fill to_0_0"></div>
        </div>
        <p>중심점(0 0)</p>
    </div>

    <div class="card">
        <div class="box">
            <div class="fill to_100_0"></div>
        </div>
        <p>중심점(100 0)</p>
    </div>

    <div class="card">
        <div class="box">
            <div class="fill to_0_100"></div>
        </div>
        <p>중심점(0 100)</p>
    </div>

    <div class="card">
        <div class="box">
            <div class="fill to_100_100"></div>
        </div>
        <p>중심점(100 100)</p>
    </div>
</body>
</html>

@charset "utf-8";
*,
*::after,
*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #f5f3f4;
    text-align: center;
}

h1{
    color: #666;
    font-weight: 600;
    border-bottom: 1px solid #ccc;
    /*밑 선 넣기*/
    padding-bottom: 10px;
    /*기준점을 잘 생각해서 넣어줘야한다.*/
    margin-bottom: 10px;
    text-align: center;
}

h4{
    font-size: 30px;
    color: #666;
}

.card{
    margin: 50px;
    background-color: #fff;
    padding: 15px;
    width: 200px;
    height: 200px;
    box-shadow: 0 3px #ddd;
    display: inline-block;
    /*인라인 블럭구조로 변경해서 블럭구조와 옆으로 보내주는 인라인구조로 한다.
    문제는 여백이 생긴다. 정확한 구조를 요하는 부분은 float을 사용한다.*/
}

.card .box{
    width: 100px;
    height: 100px;
    background-color: #ddd;
    margin: auto;
    /*박스를 좌우 중앙으로 보내줘라*/
}

.card .box .fill{
    width: 100%;
    height: 100%;
    background-color: blue;
    opacity: 0.3;
    transition: 0.3s;
}

.card p{
    margin-top: 25px;
    text-align: center;
    /*정중앙에 텍스트가 들어갔다는 것은 p태그가 블럭구조다*/
}

.card .rotate:hover .fill{
    transform: rotate(45deg);
}

.card .rotateX:hover .fill{
    transform: rotateX(45deg);
}

.card .rotateY:hover .fill{
    transform: rotateY(45deg);
}

.card .scale:hover .fill{
    transform: scale(2);
}

.card .scaleX:hover .fill{
    transform: scaleX(2);
}

.card .scaleY:hover .fill{
    transform: scaleY(2);
}

.card .translate:hover .fill{
    transform: translate(45px, 45px)
}

.card .translateX:hover .fill{
    transform: translate(45px)
}


.card .translateY:hover .fill{
    transform: translate(45px)
}

.perspective_100 .box{
    perspective: 100px;
}

.perspective_400 .box{
    perspective: 100px;
}
/*숫자가 클수록 앞각도가 더 작아진다.*/

마우스 오버 효과1

figure : 그림을 넣기 위한 태그 , img:이미지넣기 figcaption:설명추가하기

height: 100vh

vh란? 화면을 가로로 100개 잘라서 그 중 100개를 사용한다는 단위

<가운데 정렬 3종 세트>

dispaly: flex; --> 단 정렬하고 싶은 대상의 부모에다가 명령어를 줘야함

align-items: center; --> 세로 가운데 정렬

justify-content: center; --> 가로 가운데 정렬

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>마우스 오버효과1</title>
    <link rel="stylesheet" href="./css/style2.css">
</head>
<body>
    <div id="wrap">
        <figure class="ho1">
            <img src="./img/img01.png" alt="거북이이미지">
            <figcaption>
                <h3>Mouse Hover</h3>
                <p>마우스 오버효과입니다.</p>
            </figcaption>
        </figure>

        <figure class="ho2">
            
        </figure>
    </div>
</body>
</html>

<!--figure : 그림을 넣기 위한 태그, img:이미지넣기 figcaption: 설명을 추가하기-->

css

@charset "utf-8";

body{
    height: 100vh;
    /*vh: 화면을 가로로 100개 잘라서 그 중 100개를 사용하겠다는 단위*/
    background-color: #0f2027;
}

#wrap{
    height: 100vh;
    display: flex; /*단 정렬하고 싶은 대상의 부모에다가 명령어를 줘야함*/
    align-items: center;/*세로 가운데 정렬*/    
    justify-content: center; /*가로 가운데 정렬*/
}

#wrap .ho1{
    width: 400px;
    overflow: hidden;
    margin: 10px;
    position: relative;
    /*ho1에 기준점이 됨*/
}

#wrap .ho1 img{
    /* width: 400px; */
    /*이미지width를 ho1과 width를 똑같이 맞춰줘야함*/
    width: 100%;
    /*이미지 width 100%로 맞춰주면 자동으로 사이즈가 맞춰짐*/
    display: block;
    /*여백이 생기기 때문에 블럭구조로 바꿔주면 좋다.*/
    border-radius: 5px;
    
}

#wrap .ho1 figcaption{
    color: #fff;
    /* background-color: #fff; */
    background-color: rgba(0,0,0,0.4);
    position: absolute;
    bottom: -150px;
    /*밑으로 붙이고싶으면 bottom, 위로 붙이고 싶으면 top*/
    /*150px로 했을 때 안보였다가 hover bottom: 0px로 하면 올라옴*/
    left: 0;
    /*ho1을 기준으로 해서 figcaption이 움직임*/
    width: 100%;
    /*position이 들어가면 넓이값을 다시 지정을 해줘야함*/
    padding: 20px;
    transition: all 0.5s;
    /*transition 속도를 줘야 아래에서 위로 ho1이 올라온다.*/
    
}
#wrap .ho1 figcaption h3{
    font-size: 20px;
    text-shadow: 2px 2px 5px #000;

}
#wrap .ho1 figcaption p{
    font-size: 16px;
}

#wrap .ho1:hover figcaption{
    bottom: 0px;
}

사슴이미지 마우스오버효과

<body>
    <div id="wrap">
        <figure class="ho1">
            <img src="./img/img01.png" alt="거북이이미지">
            <figcaption>
                <h3>Mouse Hover</h3>
                <p>마우스 오버효과입니다.</p>
            </figcaption>
        </figure>

        <figure class="ho2">
            <img src="./img/img02.png" alt="사슴이미지">
            <figcaption>
                <h3>Mouse Hover</h3>
                <p>조수정</p>
            </figcaption>
        </figure>
        </figure>
    </div>
</body>
</html>

#wrap .ho2{
    width: 400px;
    overflow: hidden;
    margin: 10px;
    position: relative;    
}

#wrap .ho2 img{
    width: 100%;
    display: block;
    border-radius: 5px;
}

#wrap .ho2 figcaption{
    color: #fff;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    left: 0;
    bottom: -150px;
    width: 100%;
    padding: 20px;
    transition: all 0.5s;
    box-sizing: border-box;
}

#wrap .ho2 figcaption h3{
    font-size: 20px;
    text-shadow: 2px 2px 5px #444;
}
#wrap .ho2 figcaption p{
    font-size: 16px;
}

#wrap .ho2:hover figcaption{
    bottom: 0;
}

opacity 활용해서 마우스오버 천천히 나타나게 하기

opacity와 올라오기 효과 동시에 주기

728x90

저작자표시 비영리 변경금지

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

비주얼 스튜디오 코드 17_ 마우스 오버 효과 (0)	2023.06.08
비주얼 스튜디오 코드 16_ header 사이드에 넣기 (0)	2023.06.07
비주얼 스튜디오 코드⑭ 피그마이용해서 이미지크기 조절 ㅣ 콘텐츠 모양을 자유롭게 변형하기_2 (0)	2023.06.05
비주얼 스튜디오 코드⑬ 콘텐츠 모양을 자유롭게 변형하기 (0)	2023.06.05
비주얼 스튜디오 코드⑫ css 외부링크 만들기, css 링크 불러오기 (0)	2023.06.02

현재글비주얼 스튜디오 코드⑮ 트렌스폼을 이용해서 효과주기_2

조반짝의 도전일지

공부, 취미, 여행 모두 경험해보고 싶은 조반짝의 도전일지입니다. ✨contact_ looby777@naver.com ✨Instagram_holylovuuu_illust

웹디자인, 프론트엔드, media, ACTIVE, SQL, 자바스크립트, 코딩테스트, Parallax, 자바, float, offset, position, For문, if문, Java, CSS, 비주얼스튜디오코드, JavaScript, 이클립스, HTML,

Today :
Yesterday :

조반짝의 도전일지