CSS-ROTATE

임재헌·2023년 3월 24일
CSS

목록 보기
18/23
<!DOCTYPE html>
<html lang="ko">
<head>
<title>rotate</title>
<style>
#menu{
    position: relative;/*부모 지정*/
    width: 150pt;
    height: 130pt;
    background-color: cyan;
    margin: auto; /*수평을 기준으로 가운데 정렬*/
    border-radius: 20pt;/* 모서리 라운드 처리*/
     
}

#menu:hover{    /* 마우스가 올라오면 */
    background-color: orange;
    cursor: grab;
    
}

#menu> strong {
    /* 원래 나의 위치도 사라지고 부모안에서만 움직임*/
    position: absolute;
    left: 45pt;
    bottom: 10pt;
}

/* 이미지 삽입*/

#menu>.gear {
    position: absolute;
    width: 40px;
    height: 40px;
    background-image: url(../images/gear-gray.png);
    background-size: 40px 40px;
 }
 
 /* 톱니바퀴 이미지 배치하기 */
#menu>.gear:nth-child(1){
    top: 16px;
    left: 46px;
}

#menu>.gear:nth-child(2){
    top: 47px;
    left: 64px;
    /* 시계방향으로 30도 회전*/
    transform: rotate(30deg);
}

/* 마우스가 바탕색에 오버가 되면 이미지를 오렌지색 이미지로 변경*/
#menu:hover>.gear{
    background-image: url(../images/gear.png);
    /*부드럽게*/
    transition: .4s linear;
    /* ease linear*/
}

/*이미지 회전*/
#menu:hover>.gear:nth-child(1){
    /*시계 반대방향  반바퀴 회전*/
    transform: rotate(-180deg);
}

#menu:hover>.gear:nth-child(2){
    /*시계 방향 회전*/
    /*이미 30도가 회전된 상태이므로 30도 +180도 해야 반바퀴 회전*/
    transform: rotate(210deg);
}
</style>
  
</head>
<body>
<div id="menu">
<div class="gear"></div>    
<div class="gear"></div>
<strong>SETTINGS</strong>    
</div>
</body>
</html>
임재헌
이전 포스트
CSS-DISPLAY

다음 포스트
CSS-ROTATE

CSS

CSS-DISPLAY

CSS-SKEW

0개의 댓글
