CSS 변형에는 여러 가지 속성이 있습니다-프런트엔드 Q&A-php.cn

CSS 변환에는 6가지 속성이 있습니다. 1. 요소에 2D 또는 3D 변환을 적용하는 변환 2. 변환된 요소의 위치를 변경할 수 있는 변환 원본 3. 중첩된 요소의 위치를 지정하는 변환 스타일 3D로 변환 공간에 표시됩니다. 4. 원근감은 3D 요소의 원근감 효과를 규정합니다. 5. 원근감-원점은 3D 요소의 하단 위치를 규정합니다.

CSS 변형에는 여러 가지 속성이 있습니다

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS3 변환은 요소를 이동, 크기 조정, 회전, 늘리거나 늘릴 수 있습니다. 변환의 효과는 요소의 모양, 크기 및 위치를 변경하는 것입니다.

css 변환(변형) 속성

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

CSS3 변환 속성

Role: 변환 속성은 요소에 2D 또는 3D 변환을 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다.

구문:

transform: none|transform-functions;

로그인 후 복사

사용 예

    
     
 
 rotate(45deg) 
 
   
 
 rotateX(45deg)
 
   
 
 rotateY(45deg)
 
   
 
 rotateZ(45deg) 
 
    
 
 scale(2)
 
   
 
 scaleX(2) 
 
   
 
 scaleY(2) 
 
    
 
 skew(45deg, 45deg) 
 
   
 
 skewX(45deg)
 
   
 
 skewY(45deg)
 
    
 
 translate(45px) 
 
   
 
 translateX(45px)
 
   
 
 translateY(45px)
 
   
 
  matrix(2, 2, 0, 2, 45, 0)

로그인 후 복사

Rendering:

CSS 변형에는 여러 가지 속성이 있습니다

CSS3 변형 원본 속성

기능: 위치를 변경하려면. 2D 변환 요소는 요소의 x 및 y축을 변경합니다. 3D 변환 요소는 Z축을 변경할 수도 있습니다.

구문:

transform-origin: x-axis y-axis z-axis;

로그인 후 복사

value	설명
x-axis	X축에서 뷰가 배치되는 위치를 정의합니다. 가능한 값: ● 왼쪽 ● 가운데 ● 오른쪽 ● 길이 ● %
y축	Y축에서 뷰가 배치되는 위치를 정의합니다. 가능한 값: ● 상단 ● 중앙 ● 하단 ● 길이 ● %
z-axis	Z축에서 뷰가 배치되는 위치를 정의합니다. 가능한 값: 길이

注：该属性必须与transform 属性一同使用。

使用示例

旋转红色的DIV元素，尝试更改其X轴和Y轴：

HELLO

Rotate: transform: rotateY:(45deg);

X-axis:
Y-axis: transform-origin: 20% 40%;

로그인 후 복사

效果图：

CSS 변형에는 여러 가지 속성이 있습니다

CSS3 transform-style属性

作用：transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

语法：

transform-style: flat|preserve-3d;

로그인 후 복사

flat：子元素将不保留其 3D 位置。

preserve-3d：子元素将保留其 3D 位置。

注：该属性必须与transform 属性一同使用。

使用示例

    
   HELLO YELLOW

로그인 후 복사

效果图：

CSS 변형에는 여러 가지 속성이 있습니다

CSS perspective属性

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

语法

perspective: number|none;

로그인 후 복사

值	描述
number	元素距离视图的距离，以像素计。
none	默认值。与 0 相同。不设置透视。

注释：perspective 属性只影响 3D 转换元素。

提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

使用示例：

     
   HELLO

로그인 후 복사

CSS 변형에는 여러 가지 속성이 있습니다

CSS3 perspective-origin属性

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。

perspective-origin: x-axis y-axis;

로그인 후 복사

值	描述
x-axis	定义该视图在 x 轴上的位置。默认值：50%。可能的值： left center right length %
y-axis	定义该视图在 y 轴上的位置。默认值：50%。可能的值： top center bottom length %

值

描述

x-axis

定义该视图在 x 轴上的位置。默认值：50%。

可能的值：