Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

제뉴어리의 모든것

perspective 주의점. 본문

css

perspective 주의점.

제뉴어리맨 2022. 5. 14. 19:49

perspective 속성은 원금감을 주는 속성으로 값은 0보다 커야하며,

원래 있던 위치에서 사용자가 있는쪽으로 얼마나 이동하는지를 픽셀 크기로 나타낸다.

값이 클수록 사용자로부터 멀어지고, 주의할 점은 perspective 속성을 변형하는 요소가 아니라 변형하는 요소의 부모 요소에 정의해야 한다는 것이다.

 

<!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">
    
    <style>
        .origin{ /* 부모 영역 지정 (검정박스 영역 보여주기 위함, perspective 속성은 회전 시킬 대상의 부모에게 줘야함) */
            width: 300px;
            height: 300px;
            border: 1px solid black;
            perspective: 200px; /* 부모영역에 적용 */
        }

        .box{ /* 회전 시킬 영역 */
            width: 300px;
            height: 300px;
            background-color: blueviolet;
            
        }

        #rotateY:hover{ /* 회전시키는 선택자 */
            transform:rotateY(360deg);
            transition: all 10s;
        }
    </style>

    <title>Document</title>
</head>
<body>

    <div class="origin">
        <div class="box" id="rotateY"> /* 박스영역 적용하고 회전 적용 */

        </div>
    </div>
    
</body>
</html>

'css' 카테고리의 다른 글

[CSS] display - block과 inline 그리고 inline-block  (0) 2022.06.04
특정위치 자식 요소 선택하기 first-child  (0) 2022.06.04
여러가지 연산자 (>), (추후 업데이트)  (0) 2022.05.14
다양한 선택자 ( + , ~, first-child, only-child, last-child, nth-child(a))  (0) 2022.05.14
CSS 선택자의 종류  (0) 2021.03.31
'css' Related Articles more