CSS에서 2D 변환을 구현하는 방법(예)

이 문서의 내용은 CSS에서 2D 변환(예제)을 수행하는 방법에 대한 것입니다. 이는 특정 참고 가치가 있으므로 도움이 될 수 있습니다.

스크립트 CSS
아래 CSS를 통해 애니메이션 효과를 얻을 수 있습니다. 스크립트 CSS를 사용하면 확장 가능한 목록, 즉 동적 HTML, 오래된 용어인 DHTML을 구현할 수 있습니다.

CSS에 대한 몇 가지 기본 지식

이전 이미 크고 두꺼운 책을 읽었는데 이제 간략하게 살펴보고 모르는 점을 추가하겠습니다.

Stacking

웹 브라우저는 요소의 스타일 속성을 결합한 다음 스타일을 계산합니다.

색상 투명도와 반투명도

색상이 반투명합니다(가장자리가 왜 호환되지 않는지 모르겠습니다)

스크립트된 인라인 스타일

p.style.background = "#FFFFFF"

즉, CSS 스타일 추가는 js를 통해 이루어집니다

이로 인해- js에서는 문법적 오류로 간주되므로 js에서는 카멜 표기 방식으로 일률적으로 변경합니다. 이건 습관

마찬가지로 속성을 직접 사용해 설정할 수도 있고

e.setAttribute

CSS의 인라인 스타일을 설정할 수도 있습니다

실제로 CSS 속성의 인라인 스타일을 추가하면 효과를 얻을 수 있습니다. 즉, 스타일의 가치

스타일의 무게는 어떤 스타일보다 크기 때문에 js로 생성된 스타일의 가치는 의도적으로 무게를 변경하지 않는 한 항상 유효합니다.

CSS의 2D 변환

즉, 일부 CSS 변환을 수행합니다.

좌표

좌표를 설명하는 시스템에는 직교 좌표계와 동차 좌표계가 포함됩니다.

데카르트 좌표계

는 일련의 숫자 값을 사용하여 일련의 평면 위의 점을 나타냅니다. 좌표는 오른손 법칙입니다(3차원)
자세히 보기 https://en.wikipedia.org/wiki/Cartesian_coordinate_system
아래 변환은 데카르트 좌표계를 기반으로 합니다.
점을 행렬로 표현하면 행렬 변환(선형 변환)을 수행하여 해당 결과를 얻습니다. 예를 들어 곱셈 변환, 덧셈 변환 등을 수행합니다.

transform

속성을 사용하면 CSS 시각적 서식 모델의 좌표 공간을 수정할 수 있습니다. 이를 사용하여 요소를 변환, 회전, 크기 조정 및 기울일 수 있습니다. 블록 수준 요소에만 유효합니다.

원점

에는 x축, y축, z축의 세 가지 값이 있습니다.
아래 그림과 같이

각각의 값을 설정할 수 있는데, 이것이 회전의 원점입니다.
구체적인 값은 변환-원점입니다.
초기값을 지정하지 않으면 바로 상속이 사용됩니다.

Demo

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin

rotate Rotate

이 메소드는 고정점을 중심으로 요소를 회전하는 방법을 정의합니다. 변환으로 변환됨 -origin은 요소 변환의 원점을 지정합니다.

단위 각도

CSS의 기본 데이터 유형입니다. 각도는 각도의 크기를 도(도) 단위로 나타냅니다. 그라디안(그라디안) 라디안(회전)
deg 도
grad grads(각도 측정 단위인 수학을 검토하고 다음과 같이 정의됩니다. 원은 400개의 동일한 부분으로 절단됩니다. 즉, 직각은 100도와 같습니다 https://zh.wikipedia.org/wiki/%E7%99%BE%E5%88%86%E5%BA%A6)
rad Radians(복습 수학 https: //zh.wikipedia.org/wiki/%E5%BC%A7%E5%BA%A6)
원 숫자

Syntax

숫자와 단위 사이에 공백이 없습니다. 숫자가 0인 경우 단위를 생략할 수 있습니다.
+ 또는 - 기호로 시작하세요. 양수는 시계 방향 각도를 나타내고, 음수는 시계 반대 방향 각도를 나타냅니다.

몇 가지 예

90deg = 100grad = 0.25trun ≒ 1.57rad (대략 π/2와 동일)
다음 모든 표현식

회전 설명

스케일 스케일

CSS 함수 스케일( ) 확대/축소하는 데 사용됩니다. 벡터 형식으로 정의된 배율 값을 통해 요소를 확대 및 축소하여 요소의 크기를 수정하는 데 사용됩니다. 두 개의 값이 있는데 하나는 sx이고 다른 하나는 sy이며, 두 값을 기준으로 결과가 얻어집니다. sy가 설정되지 않은 경우 sy 값은 sx 값으로 직접 설정됩니다. CSS 데이터 형식의 단위는 숫자입니다

이 스케일링은 유클리드 평면(2차원 평면)에서의 변환만 지원합니다

설정된 CSS 값은

transform: scale(2, 2);

이 시점에서 수평 평면이 완성됩니다. 축이 2배, 세로축이 2배가 됩니다.
마찬가지로 크기를 줄일 수도 있습니다.

skewskew

는 기울어진 2차원 평면에서 원본의 변화이며, 그 결과가 데이터형입니다.

剪切映射

css的倾斜为剪切映射,每个点的坐标由与指定角度或成比例的值到原点的距离。对于每个坐标产生矩阵，然后对矩阵进行运算，得出运算后的坐标值。

css的3d转换

坐标

齐次坐标系

由笛卡尔坐标系投影得到。
1. 投影平面中的任何点由三元组（x，y，z）表示，称为点的齐次坐标和投影坐标
2. 如果坐标乘以公因子，则给定的一组齐次坐标点不变
3. 相反，当且仅当通过所有坐标乘以相同的非零常数，从另一个获得一个时，两组齐次坐标表示相同的点
4. 当z不为0时，表示的点为欧几里得的点。
5. 当z为0时表示的点为无穷远处的点

rotateX()

围绕x轴进行旋转

ps；设置的原点值为center
即

transform-origin:center;

rotateY()同理

3d组合不可进行交换，如果进行交换会导致出现不同的效果。

相关推荐：

css3如何实现自定义滚动条样式？（代码）

在页面中怎么用css让图片有立体感的效果?（代码实测）

위 내용은 CSS에서 2D 변환을 구현하는 방법(예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!