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. 3. 5. 20:57

반응형

[즐거'웅'코드] 목차

  1. CSS
  2. 예제 소스
  3. 구현 예시
CSS
1
2
3
4
5
 
<style>
    .test_obj:hover {
        transform: translateX(50px);
    }
</style>
예제 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div class="test_obj"></div>
  
<style>
    .test_obj {
        display: block;
        width: 200px;
        height: 200px;
        transition: all 0.3s ease-out;
        background-color: #414144;
    }
  
    .test_obj:hover {
        transform: translateX(50px);
    }
</style>
구현 예시
반응형
저작자표시

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

(즐거웅코드) 제이쿼리 textarea 높이 자동으로 조절하기  (0) 2021.03.07
(즐거웅코드) CSS textarea 우측 하단 세줄 표시 없애기  (0) 2021.03.06
(즐거웅코드) CSS로 마우스 올리면 객체를 왼쪽으로 움직이게 하기  (0) 2021.03.04
(즐거웅코드) CSS로 마우스 올리면 객체를 아래로 움직이게 하기  (0) 2021.03.03
(즐거웅코드) CSS로 마우스 올리면 객체를 위로 움직이게 하기  (0) 2021.03.02

관련글

댓글 0

티스토리툴바