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

}