<title>CSS3 3D Transform</title>
#origin { border: 3px solid black; }
background-color: #87CEFA;
-webkit-transform: rotateX(20deg);
transform: rotateX(20deg);
-webkit-transform: rotateX(40deg);
transform: rotateX(40deg);
-webkit-transform: rotateX(60deg);
transform: rotateX(60deg);
-webkit-transform: rotateX(80deg);
transform: rotateX(80deg);
-webkit-transform: rotateX(100deg);
transform: rotateX(100deg);
-webkit-transform: rotateX(120deg);
transform: rotateX(120deg);
-webkit-transform: rotateX(140deg);
transform: rotateX(140deg);
-webkit-transform: rotateX(160deg);
transform: rotateX(160deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
<h1>rotateX() 메소드를 이용한 요소의 회전</h1>
<div id="origin">이 요소의 원래 모양입니다.</div>
<div id="rotate_01" class="rotate">이 요소는 원래 모양에서 x축을 기준으로 z축의 양의 방향으로 20도만큼 회전했습니다.</div>
<div id="rotate_02" class="rotate">이 요소는 원래 모양에서 x축을 기준으로 z축의 양의 방향으로 40도만큼 회전했습니다.</div>
<div id="rotate_03" class="rotate">이 요소는 원래 모양에서 x축을 기준으로 z축의 양의 방향으로 60도만큼 회전했습니다.</div>
<div id="rotate_04" class="rotate">이 요소는 원래 모양에서 x축을 기준으로 z축의 양의 방향으로 80도만큼 회전했습니다.</div>
<div id="rotate_05" class="rotate">이 요소는 원래 모양에서 x축을 기준으로 z축의 양의 방향으로 100도만큼 회전했습니다.</div>
<div id="rotate_06" class="rotate">이 요소는 원래 모양에서 x축을 기준으로 z축의 양의 방향으로 120도만큼 회전했습니다.</div>
<div id="rotate_07" class="rotate">이 요소는 원래 모양에서 x축을 기준으로 z축의 양의 방향으로 140도만큼 회전했습니다.</div>
<div id="rotate_08" class="rotate">이 요소는 원래 모양에서 x축을 기준으로 z축의 양의 방향으로 160도만큼 회전했습니다.</div>
<div id="rotate_09" class="rotate">이 요소는 원래 모양에서 x축을 기준으로 z축의 양의 방향으로 180도만큼 회전했습니다.</div>