CSS3 3D 특수 효과 비디오 데이터 공유

CSS는 계단식 스타일시트입니다. 웹 페이지를 만들 때 계단식 스타일 시트 기술을 사용하면 페이지의 레이아웃, 글꼴, 색상, 배경 및 기타 효과를 보다 정확하게 제어할 수 있습니다.

CSS3는 CSS 기술의 업그레이드 버전이며 CSS3 언어 개발은 ​​모듈화를 향해 발전하고 있습니다. 이전 사양은 모듈로서 너무 크고 복잡했기 때문에 더 작은 모듈로 세분화되었고 더 많은 새로운 모듈이 추가되었습니다. 이러한 모듈에는 상자 모델, 목록 모듈, 하이퍼링크 방법, 언어 모듈, 배경 및 테두리, 텍스트 효과, 다중 열 레이아웃 등이 포함됩니다.

"CSS3 3D 특수 효과 비디오 튜토리얼"은 CSS3의 전환 속성, 관점 속성 및 변환 속성을 사용하여 실제적이고 사용 가능한 3차원 효과를 만듭니다.

영상 재생 주소 : http://www.php.cn/course/416.html

이 영상 학습의 어려움

1. 회전 방향 및 기울기

기울기 변경에서 가장 중요한 것은 기본 변환 방향입니다.

　회전 변환의 경우 기본값은 기준 축의 양의 방향을 따라 시계 방향으로 변환을 수행하는 것입니다(사용된 회전 방법에 따라 결정됩니다. 예:rotateX()의 기준 축은 X 축입니다). 위 그림에서 검은색 테두리로 둘러싸인 평면을 요소로 간주하고, 이때 요소를 (+) 30° 회전하면 검은색 평면이 X-에 고정됩니다. 축이 있고 Y축은 양의 방향입니다. 한쪽 면을 위로 들어 올립니다. (나무 판을 들어올리는 것과 마찬가지로 들어 올려진 나무 판은 여전히 ​​평면에 있고 책을 돌리는 것처럼 구부러지지 않습니다.) RotateY()에도 동일하게 적용됩니다. RotateZ()는 요소를 시계 방향으로 회전시키는 2D 변환의 Rotate() 메서드와 동일합니다.

rotatex

rotatey

rotatez

　기울기 변환의 경우 X축 방향과 Y축 방향이 반대입니다. SkewX()는 요소의 수직 측면을 시계 반대 방향(즉, 왼쪽)으로 기울이고,skewY()는 요소의 수평 측면을 시계 방향(즉, 아래쪽)으로 기울입니다.

skewx

skewy

2. 변환 기준점, 시점 및 시야 거리

기본적으로 CSS3 변환의 기준점은 요소의 중심점입니다. 즉, 변환 후(회전, 기울기 및 크기 조절만 해당) , 요소의 중심점 요소의 좌표는 변경되지 않습니다. 예를 들어 요소의 초기 위치는 화면의 왼쪽 상단과 일치하고 너비와 높이가 모두 100° 회전한 후 좌표입니다. 요소의 중심점은 여전히 ​​(50,50)입니다.

　시점은 3D 변환에만 사용되는 또 다른 종류의 기준점입니다. 관점을 이해하려면 관점적 사고를 사용할 수 있습니다. 우리 모두는 이 게임에 대해 "두 개의 평행한 직선이 무한대에서 교차한다"는 인상을 받아야 합니다. 3차원 공간의 직선은 무한대에서도 교차할 수 없습니다. 그러나 인간의 눈에 투영하면 원래 평행한 직선은 "원근" 현상으로 인해 한 점에서 교차할 때까지 계속해서 서로 접근하게 됩니다. .

그러나 시점은 선의 교차점이 아닙니다. 위 그림의 시점은 실제로 평면의 가장 바깥쪽 표면, 즉 중앙의 큐브가 화면 바깥쪽으로 돌진하는 표면에 있습니다. CSS의 관점 원리는 동일합니다. 즉, 사람의 눈이 특정 위치에 있을 때 요소가 어떻게 보이는지 시뮬레이션합니다. 즉, 위 그림의 다른 위치에 있는 큐브와 같을 수 있습니다. "관점"에서는 사람들이 볼 수 있도록 다양한 표면을 제시하며, 관점은 요소의 3차원 표현을 시뮬레이션하는 데 사용되는 속성입니다.

제가 언급해야 할 또 다른 속성은 시거리입니다. 이름에서 알 수 있듯이 시야 거리는 관점에서 물체까지의 거리입니다. "원근법"의 원리에 따르면 물체는 가까운 곳에서는 크게 보이고 멀리 있는 곳에서는 작게 보입니다. 매우 작게 보일 것이며 심지어 눈에 보이지도 않을 것입니다. Perspective 속성은 TranslateZ() 메소드와 함께 "먹어야" 하며, 상위 요소에 대한 Perspective를 설정하고, 동시에 TranslateZ() 메소드를 하위 요소에 적용해야 합니다. 즉, 상위 요소가 사용됩니다. 인간의 눈의 위치를 ​​시뮬레이션하기 위해 하위 요소가 보려는 개체입니다. TranslateZ() 메소드가 하위 요소에 적용되지 않은 경우, 이는translateZ(0)과 동일하며 요소는 원래 크기를 표시합니다. 변환 거리가 보기 거리에 가까울수록(초과하지 않음) 요소가 더 커집니다. 그렇지 않으면 더 작게 나타납니다. 변환 거리가 보기 거리를 초과하면 요소가 사라지며 이는 인간의 눈 뒤로 움직이는 물체와 동일하며 자연스럽게 보이지 않습니다. 원근법의 작동 원리는 요소에 의해 설정된 원래 크기를 보는 거리에서 요소의 크기로 사용하는 것입니다. 따라서 요소는 이동(+) 거리만큼 커집니다. -) 거리이지만 시거가 설정된 경우에만 유효해야 합니다.

　또한 위의 투시도에서 볼 수 있듯이 서로 다른 위치에 있는 물체는 다르게 보입니다. CSS에서는 이 효과를 얻으려면 상위 요소의 보기 거리를 설정한 다음 여러 하위 요소에 변형을 적용할 수 있습니다.

위 내용은 CSS3 3D 특수 효과 비디오 데이터 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!