CSS3 3D 변환 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

CSS3 3D 변환 정보

CSS CSS3 3D 변환

본문

CSS3 3D 변환

CSS3를 사용하면 3D 변형을 사용하여 요소의 서식을 지정할 수 있습니다.


아래 요소 위로 마우스를 가져 가면 2D와 3D 변환의 차이점을 볼 수 있습니다.


rotateX () 메서드


X 회전


이 rotateX()방법은 주어진 각도에서 X 축을 중심으로 요소를 회전시킵니다.


div {

    -webkit-transform: rotateX(150deg); /* Safari */

    transform: rotateX(150deg);

}


[전체소스]

<!DOCTYPE html>

<html>

<head>

<style>

div {

    width: 300px;

    height: 100px;

    background-color: yellow;

    border: 1px solid black;

}


div#myDiv {

    -webkit-transform: rotateX(150deg); /* Safari */

    transform: rotateX(150deg); /* Standard syntax */

}

</style>

</head>

<body>


<div>

This a normal div element.

</div>


<div id="myDiv">

The rotateX() method rotates an element around its X-axis at a given degree. This div element is rotated 150 degrees.

</div>


<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX() method.</p>


</body>

</html>



rotateY () 메서드

Y 회전


이 rotateY()메서드는 주어진 각도에서 Y 축을 중심으로 요소를 회전합니다.


div {

    -webkit-transform: rotateY(130deg); /* Safari */

    transform: rotateY(130deg);

}


rotateZ () 메서드


이 rotateZ()메소드는 주어진 각도에서 Z 축 둘레로 요소를 회전시킵니다.


div {

    -webkit-transform: rotateZ(90deg); /* Safari */

    transform: rotateZ(90deg);

}

추천
0

댓글 0개

전체 1,263
퍼블리셔팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT