테스트 사이트 - 개발 중인 베타 버전입니다

CSS3 3D 변환

· 8년 전 · 1791

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);

}

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

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