지역 사회 배우다 도구 라이브러리 여가
찾다
한국어

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>
제출하다코드 재설정
이전 섹션 다음 섹션
튜토리얼 목록
도움을 받다
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~

이 강좌를 시청한 학생들도 학습하고 있습니다.

최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)  492837회 재생