CSS3 3D 변환LOGIN
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

CSS3 3D 변환

CSS3 3D 변환

3D 변환

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

이 장에서는 다음 3D 변환 방법 중 일부를 배우게 됩니다:

  • rotateX()

  • rotateY()

rotateX() 방법

rotateX( ) 방법, X축이 특정 각도만큼 회전되는 요소입니다.

예

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:75px;
            background-color: #f4ff99;
            border:1px solid black;
        }
        div#div2
        {
            transform:rotateX(120deg);
            -webkit-transform:rotateX(120deg); /* Safari and Chrome */
        }
    </style>
</head>
<body>
<div>PHP.CN</div>
<div id="div2">HELLO</div>
</body>
</html>

프로그램을 실행하여 시험해 보세요

rotateY() 메서드

rotateY() 메서드는 Y축을 중심으로 지정된 각도로 요소를 회전합니다. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:75px;
            background-color:red;
            border:1px solid black;
        }
        div#div2
        {
            transform:rotateY(130deg);
            -webkit-transform:rotateY(130deg); /* Safari and Chrome */
        }
    </style>
</head>
<body>
<div>Hello</div>
<div id="div2">Hello.</div>
</body>
</html>

프로그램을 실행하고 사용해 보세요

변형 속성

아래 표에는 모든 변환 속성이 ​​나열되어 있습니다.


변신하다 요소에 2D 또는 3D 변환을 적용합니다. 을 사용하면 변환된 요소의 위치를 ​​변경할 수 있습니다. 은 중첩된 요소가 3D 공간에 표시되는 방식을 지정합니다. 3D 요소의 원근 효과를 지정합니다. 3D 요소의 하단 위치를 지정합니다. 화면을 향하지 않을 때 요소가 표시되는지 여부를 정의합니다.
3transform-origin
3transform-style
3perspective
3perspective-origin
3backface-visibility
3


3D 변환 방법

y)yz)x)y)yz,anglerotateX(anglerotateY(angle
FunctionDescription
matrix3d(n,n , n,n,n, 3D 정의 변형, 16개 값의 4x4 행렬을 사용합니다.
translate3d(x,y,z)3D 변환을 정의합니다. translateX(x) X축에 사용된 값만 사용하여 3D 변환을 정의합니다. 		translateY(
은 Y축에 사용되는 값만 사용하여 3D 변환을 정의합니다. translateZ(z) Z축에 사용된 값만 사용하여 3D 변환을 정의합니다.
scale3d(x,,
3D 스케일링 변환을 정의합니다. scaleX(
은 X축 값이 주어지면 3D 크기 조정 변환을 정의합니다. scaleY(
은 Y축 값이 주어지면 3D 크기 조정 변환을 정의합니다. scaleZ(z)은 Z축 값이 지정된 3D 크기 조정 변환을 정의합니다.
rotate3d(x,,
)3D 회전을 정의합니다.
)은 X축을 따라 3D 회전을 정의합니다.
)은 Y축을 따라 3D 회전을 정의합니다. rotateZ(angle)은 Z축을 따라 3D 회전을 정의합니다.
perspective(n) 3D 변환 요소의 투시도를 정의합니다.
다음 섹션
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> div { width:100px; height:75px; background-color: #f4ff99; border:1px solid black; } div#div2 { transform:rotateX(120deg); -webkit-transform:rotateX(120deg); /* Safari and Chrome */ } </style> </head> <body> <div>PHP.CN</div> <div id="div2">HELLO</div> </body> </html>
제출하다코드 재설정
장코스웨어
    없음