CSS3의 3D 시작
CSS3의 3D를 재생하려면 여러 가지 어휘, 즉 관점, 회전 및 번역을 이해해야합니다. 관점은 현실적인 관점에서 화면에서 2D를 보면 3D의 효과를 보여줍니다. 회전은 더 이상 2D 평면에서 회전이 아니라 X 축, Y 축 및 Z 축 회전을 포함한 3 차원 좌표계의 회전입니다. 번역도 마찬가지입니다.
물론, 이론을 설명하기 위해 이론을 사용하면 이해가되지 않을 것입니다. 다음은 3 가지 gif입니다.
x 축을 따라 회전합니다
y 축을 따라 회전하십시오
z 축을 따라 회전하십시오
회전에 아무런 문제가 없어야하므로 번역, 즉 X 축, Y 축 및 Z 축으로 이동하는 것이 더 쉽습니다.
관점은 이해하기 어렵다고 말할 수 있습니다. 몇 가지 관점 속성을 소개하겠습니다.
관점
원근법의 영어 이름은 관점입니다. 이 일이 없으면 3D 효과를 형성 할 방법이 없습니다. 그러나이 작업은 어떻게 브라우저가 3D 효과를 형성 할 수 있습니까? 아래 그림을 볼 수 있습니다. 사실, 그림을 배운 사람들은 관점 관계를 알아야하며 이것이 이유입니다.
그러나 CSS에서는 수치 값이 있습니다. 예를 들어, 1000px는 무엇을 나타내는가? 우리는 우리가 객체를 직접 보면 물체가 압도적이고 시력을 차지할 것이라는 것을 이해할 수 있습니다. 그것으로부터의 거리는 점점 커지고 있으며 3 차원 의미가 나타납니다. 실제로이 값은 눈과 화면 사이의 거리를 구성하며, 이는 가상 3D 환상을 구성합니다.
원근-원래
위에서 우리는 관점을 이해 하고이 기원이 무엇인지 추가합니다. 앞에서 언급 한 것은 물체와의 거리이며, 이것은 눈의 시야입니다. 우리의 관점의 다른 위치는 우리가 보는 다른 장면을 결정합니다. 기본값은 센터이며, 원근법-오리진 : 50% 50%입니다. 첫 번째 값은 3D 요소가 기반을 둔 x 축이고, 두 번째 위치는 y 축에 정의됩니다.
요소에 대한 관점-원래 속성을 정의 할 때, 자식 요소는 요소 자체가 아니라 원근법 효과를 얻습니다. 원근 속성과 함께 사용해야하며 3D 변환 요소에만 영향을 미칩니다. (W3School)
변환 스타일
관점이 다시 여기에 있습니다. 예, CSS의 3D의 핵심입니다. 변환 스타일은 기본적으로 평평합니다. 요소에 대한 3D 효과를 보려면 변환 스타일 : Preserve-3D를 사용해야합니다. 그렇지 않으면 3D 변환이 아닌 평면 변환 일뿐입니다.
CSS3-3d로 단계별로 플레이하십시오
우리는 위의 개념을 약간 이해하고 있으므로 아래의 실제 전투를 시작하겠습니다!
효과를 살펴 보자.
1 단계 : HTML 구조
매우 간단한 컨테이너는 6 개 조각이 들어있는 조각 상자로 포장됩니다.
감
2 단계 : 3D 세계에 들어가기 위해 필요한 3D 속성 추가
위의 설명을 통해 관점에 더 익숙해야합니다.
/*container*/.Container {-webkit -perspective : 1000px; -Moz-Perspective : 1000px; -ms-perspective : 1000px; 원근법 : 1000px;}/*조각 상자*/ .Piece-Box {Persception-Origin : 50% 50%; -webkit-transform 스타일 : Preserve-3D; -Moz 변환 스타일 : Preserve-3D; -ms-transform 스타일 : Preserve-3D; 변환 스타일 : Preserve-3d;}3 단계 : 필요한 스타일을 추가하십시오
/*container*/.Container {-webkit -perspective : 1000px; -Moz-Perspective : 1000px; -ms-perspective : 1000px; 관점 : 1000px;}/*조각 상자*/. 조각-박스 {위치 : 상대; 너비 : 200px; 높이 : 200px; 마진 : 300px 자동; 원근-원산지 : 50% 50%; -webkit-transform 스타일 : Preserve-3D; -Moz 변환 스타일 : Preserve-3D; -ms-transform 스타일 : Preserve-3D; 변환 스타일 : preserve-3d;}/*조각 일반 스타일*/. 조각 {위치 : 절대; 너비 : 200px; 높이 : 200px; 배경 : 빨간색; 불투명도 : 0.5;}. 조각 -1 {배경 : #ff6666;}. 조각 -2 {back물론,이 단계를 완료 한 후에도 우리의 3D 변환이 아직 시작되지 않았기 때문에 여전히 우리의 조각 -6 인 정사각형 만 볼 수 있습니다.
4 단계 : 3D 변환 공격
첫 번째는 회전 랜턴을 실현하는 것입니다. 우리는 그것을 먼저 놓아서 가벼운 부분을 깨닫지 말아야합니다.
그것을 달성하는 방법? 원을 형성하기 위해 원은 360도이고 6 개 조각이 있으므로 각 조각을 60 도의 증분으로 회전해야한다고 생각하기 쉽고 다음과 같이됩니다.
중앙에서 그들을 끌어내는 방법?
여기서 우리는 y 축 주위의 요소를 회전하면 x와 z 축이 실제로 회전하므로 큐브의 각면의 수직선은 여전히 z 축입니다. 우리는 Translatez의 가치 만 변경하면됩니다. Translatez가 긍정적 일 때, 우리는 방향으로 걸어 가서 그것을 떼어 낼 수 있습니다.
그러나 거리를 측정하는 방법?
한눈에 분명합니까?
CSS를 수정합시다
.Piece-1 {배경 : #ff6666; -webkit-transform : rotatey (0deg) translatez (173.2px); -ms-transform : rotatey (0deg) translatez (173.2px); -o-transform : rotatey (0deg) translatez (173.2px); 변환 : rotatey (0DEG) Translatez (173.2px);}. piece-2 {배경 : #fff00; -webkit transform : Rotatey (60deg) Translatez (173.2px); -ms-transform : rotatey (60deg) translatez (173.2px); -o-transform : rotatey (60deg) translatez (173.2px); 변환 : Rotatey (60deg) Translatez (173.2px);}. site-3 {배경 : #006699; -webkit-transform : Rotatey (120deg) Translatez (173.2px); -ms-transform : rotatey (120deg) translatez (173.2px); -o-transform : rotatey (120deg) translatez (173.2px); -o-transform : rotatey (120deg) translatez (173.2px); 변환 : Rotatey (120deg) Translatez (173.2px);}. site-4 {배경 : #009999; -webkit-transform : Rotatey (180deg) Translatez (173.2px); -ms-transform : Rotatey (180deg) Translatez (173.2px); -o-transform : Rotatey (180deg) Translatez (173.2px); 변환 : Rotatey (180deg) Translatez (173.2px);}. site-5 {배경 : #ff0033; -webkit-transform : Rotatey (240deg) Translatez (173.2px); -ms-transform : rotatey (240deg) translatez (173.2px); -o-transform : rotatey (240deg) translatez (173.2px); 변환 : Rotatey (240deg) Translatez (173.2px);}. site-6 {배경 : #ff6600; -webkit-transform : Rotatey (300deg) Translatez (173.2px); -ms-transform : rotatey (300deg) translatez (173.2px); -o-transform : rotatey (300deg) translatez (173.2px); 변환 : Rotatey (300deg) Translatez (173.2px);}회전 랜턴이 실현 되었습니까?
5 단계 : 애니메이션은 3D 이동을 만듭니다
움직이는 랜턴을 달성하기 위해서는 실제로 매우 간단합니다. 우리는 조각 박스에 회전 애니메이션을 추가하면됩니다. 5 초 안에 애니메이션을 완료하고 0도에서 360 도로 회전합니다.
/*조각 상자*/. 조각-박스 {위치 : 상대; 너비 : 200px; 높이 : 200px; 마진 : 300px 자동; 원근-원산지 : 50% 50%; -webkit-transform 스타일 : Preserve-3D; -Moz 변환 스타일 : Preserve-3D; -ms-transform 스타일 : Preserve-3D; 변환 스타일 : Preserve-3D; 애니메이션 : 조각 5 초; -Moz- 애니메이션 : 피아 테이트 5s; / * firefox */ -webkit -animation : piecerotate 5s; / * 사파리 및 크롬 */ -o -animation : 피아 테이트 5s; /*Opera*/}/*회전 램프 애니메이션*/@keyframes piecerotate {0% {-webkit-transform : rotatey (0deg); -ms-transform : rotatey (0deg); -o-transform : rotatey (0deg); 변환 : rotatey (0deg);} 100% {-webkit-transform : rotatey (360deg); -ms-transform : Rotatey (360deg); -o-transform : rotatey (360deg); 변환 : rotatey (360deg);}}/ * firefox */@-moz-keyframes piecerotate {0% {-webkit-transform : rotatey (0deg); -ms-transform : rotatey (0deg); -o-transform : rotatey (0deg); 변환 : rotatey (0deg);} 100% {-webkit-transform : rotatey (360deg); -ms-transform : Rotatey (360deg); -o-transform : rotatey (360deg); 변환 : Rotatey (360deg);}}/ * safari 및 chrome */@-webkit-keyframes piecerotate {0% {-webkit-transform : rotatey (0deg); -ms-transform : rotatey (0deg); -o-transform : rotatey (0deg); 변환 : rotatey (0deg);} 100% {-webkit-transform : rotatey (360deg); -ms-transform : Rotatey (360deg); -o-transform : rotatey (360deg); 변환 : rotatey (360deg);}}/ * opera */@-keyframes piecerotate {0% {-webkit-transform : rotatey (0deg); -ms-transform : rotatey (0deg); -o-transform : rotatey (0deg); 변환 : rotatey (0deg);} 100% {-webkit-transform : rotatey (360deg); -ms-transform : Rotatey (360deg); -o-transform : rotatey (360deg); 변환 : Rotatey (360deg);}}나는 여기에 gif를 넣지 않을 것입니다 ~ HHH는 멋진 효과를 달성합니까? 아직 끝나지 않았습니다 ~ 더 멋진 큐브 어셈블리
실제로 큐브를 구현하는 것은 어렵지 않습니다. 나는 여기서 세부 사항으로 들어 가지 않을 것입니다. 먼저 얼굴을 상상하고 다른 얼굴을 확장하여 구현할 수 있습니다. 예를 들어, 우리는 큐브의 전면 Translatez (100px)를 100px에 가깝게 배치 한 다음 Translatez (-100px)를 넣은 다음 100px에서 멀리 이동합니다. 왼쪽에는 TranslateX (-100px, 그런 다음 90deg)가 있습니다. 오른쪽의 오른쪽은 Translatex (100px), 회전 (90deg)은 Translatey (-100px), rotatex (90deg)이며, 하단의 변환 (100px), rotatex (100deg), 100px (100px)가 있습니다. (90deg). 애니메이션에 쓰는 한 모든 것이 완료됩니다.
CSS는 다음과 같습니다. 다음은 단지 sites1입니다. 다른 독자는 스스로 구현하거나 내 github 소스 코드를 볼 수 있습니다.
.Piece-1 {배경 : #ff6666; -webkit-transform : rotatey (0deg) translatez (173.2px); -ms-transform : rotatey (0deg) translatez (173.2px); -o-transform : rotatey (0deg) translatez (173.2px); 변환 : Rotatey (0DEG) Translatez (173.2px); 애니메이션 : stees1rotate 5s 5s; -Moz- 애니메이션 : Site1Rotate 5S 5S; / * firefox */ -webkit -animation : site1rotate 5s 5s; / * 사파리 및 크롬 */ -o -animation : site1rotate 5s 5s; / * OPERA */ -webkit-Animation-Fill-Mode : Forwards; / * Chrome, Safari, Opera */ Animation-Fill-Mode : Forwards; }/*front*/ @keyframes stees1rotate {0% {-webkit-transform : rotatey (0deg) translatez (173.2px); -ms-transform : rotatey (0deg) translatez (173.2px); -o-transform : rotatey (0deg) translatez (173.2px); 변환 : Rotatey (0DEG) TranslateZ (173.2px);} 100% {-webkit-transform : rotatey (0deg) translatez (100px); -ms-transform : rotatey (0deg) translatez (100px); -o- 변환 : Rotatey (0DEG) Translatez (100px); transform : rotatey (0DEG) TranslateZ (100px);}}} / * firefox * / @-moz-keyframes piec1rotate {0% {-webkit-transform : rotatey (0deg) translatez (100px);}} / * firefox * / @-moz-keyframes1rotate {0% {-bkit-transfort : ROTATEY (0DEG) Translatez (173.2px); -ms-transform : rotatey (0deg) translatez (173.2px); -o-transform : rotatey (0deg) translatez (173.2px); 변환 : Rotatey (0DEG) TranslateZ (173.2px);} 100% {-webkit-transform : rotatey (0deg) translatez (100px); -ms-transform : rotatey (0deg) translatez (100px); -o- 변환 : Rotatey (0DEG) Translatez (100px); -o- 변환 : Rotatey (0DEG) Translatez (100px); 변환 : ROTATEY (0DEG) Translatez (100px); 변환 : ROTATEY (0DEG) Translatez (100px); Translatez (100px);}} / * safari 및 chrome * / @-webkit-keyframes sites1rotate {0% {-webkit-transform : rotatey (0deg) translatez (173.2px); -ms-transform : rotatey (0deg) translatez (173.2px); -o-transform : rotatey (0deg) translatez (173.2px); 변환 : Rotatey (0DEG) TranslateZ (173.2px);} 100% {-webkit-transform : rotatey (0deg) translatez (100px); -ms-transform : rotatey (0deg) translatez (100px); -o- 변환 : Rotatey (0DEG) Translatez (100px); transform : rotatey (0deg) translatez (100px);}}} / * opera * / @--keyframes site1rotate {0% {-webkit-transform : rotatey (0deg) translatez (173.2px); -ms-transform : rotatey (0deg) translatez (173.2px); -o-transform : rotatey (0deg) translatez (173.2px); -o-transform : rotatey (0deg) translatez (173.2px); 변환 : Rotatey (0DEG) TranslateZ (173.2px);} 100% {-webkit-transform : rotatey (0deg) translatez (100px); -ms-transform : rotatey (0deg) translatez (100px); -o- 변환 : Rotatey (0DEG) Translatez (100px); -o- 변환 : Rotatey (0DEG) Translatez (100px); 변환 : Rotatey (0DEG) Translatez (100px);}}신중한 독자들은 내가 최종 애니메이션 효과, 즉 큐브의 효과 에이 작품을 실제로 유지하는 애니메이션 필드 Mode : Forwards;를 사용했음을 알 수 있습니다. 독자는 시도하지 않고 시도 할 수 있으며 여전히 원래 상태로 복원됩니다.
마지막으로 큐브가 회전합니다. 앞의 컨테이너는 이미 애니메이션을 사용했습니다. 독자는 수업을 추가하고 애니 메이 톤을 넣을 수 있다고 생각할 수 있습니다. HHH, Animaiton은 전면을 덮고 앞 랜턴의 애니메이션이 사라질 것입니다. HTML 구조에서 다음과 같이 다른 박스 랩핑 조각을 추가했습니다.
<div> <div> <div> <!-새 컨테이너-> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> <div> </div> </div> </div> </div> </div> </div> </div> </div>>
애니메이션에서는 큐브 애니메이션의 지연 시간을 제어 할 수 있습니다. 즉, 애니메이션을 시작하기 전에 큐브 어셈블리가 완료 될 때까지 기다립니다.
애니메이션 : Boxrotate 5S 10S 무한; 첫 번째 5s는 애니메이션 지속 시간이고, 두 번째 10s는 지연 시간이며, 그런 다음 큐브가 X 축 주위에서 0도에서 360도, 또한 y 축 주위에서 0 ~ 360 도로 회전하게합니다.
.piece-box2 {-webkit-transform 스타일 : Preserve-3d; -Moz 변환 스타일 : Preserve-3D; -ms-transform 스타일 : Preserve-3D; 변환 스타일 : Preserve-3D; 애니메이션 : Boxrotate 5S 10S 무한; -Moz-Animation : Boxrotate 5S 10S Infinite; / * firefox */ -webkit -animation : Boxrotate 5s 10s Infinite; / * 사파리 및 크롬 */ -o -animation : Boxrotate 5S 10S Infinite; /*OPERA*/}/*CUBOOD ROTATION AINCAME*/@keyFrames BoxRotate {0% {-webKit-Transform : ROTATEX (0DEG) ROTATEY (0DEG);); -ms-transform : rotatex (0deg) rotatey (0deg);); -o-transform : rotatex (0deg) rotatey (0deg););); 변환 : ROTATEX (0DEG) ROTATEY (0DEG);););} 100% {-webKit-Transform : ROTATEX (360DEG) ROTATEY (360DEG); -ms-transform : rotatex (360deg) rotatey (360deg); -o-transform : rotatex (360deg) rotatey (360deg); transform: rotateX(360deg) rotateY(360deg);}}/* Firefox */@-moz-keyframes boxRotate{0% {-webkit-transform: rotateX(0deg) rotateY(0deg);); -ms-transform : rotatex (0deg) rotatey (0deg);); -o-transform : rotatex (0deg) rotatey (0deg););); 변환 : ROTATEX (0DEG) ROTATEY (0DEG);););} 100% {-webKit-Transform : ROTATEX (360DEG) ROTATEY (360DEG); -ms-transform : rotatex (360deg) rotatey (360deg); -o-transform : rotatex (360deg) rotatey (360deg); 변환 : rotatex (360deg) rotatey (360deg);}}}}/ * safari 및 chrome */@-webkit-keyframes boxrotate {0% {-webkit-transform : rotatex (0deg) rotatey (0deg); -ms-transform : rotatex (0deg) rotatey (0deg);); -o-transform : rotatex (0deg) rotatey (0deg);); ROTATEX (0DEG) ROTATEY (0DEG);); 변환 : ROTATEX (0DEG) ROTATEY (0DEG););} 100% {-webKit-Transform : ROTATEX (360DEG) ROTATEY (360DEG); -ms-transform : rotatex (360deg) rotatey (360deg); -o-transform : rotatex (360deg) rotatey (360deg); transform: rotateX(360deg) rotateY(360deg);}}/* Opera */@-o-keyframes boxRotate{0% {-webkit-transform: rotateX(0deg) rotateY(0deg);); -ms-transform : rotatex (0deg) rotatey (0deg);); -o-transform : rotatex (0deg) rotatey (0deg);); 변환 : ROTATEX (0DEG) ROTATEY (0DEG);););} 100% {-webKit-Transform : ROTATEX (360DEG) ROTATEY (360DEG); -ms-transform : rotatex (360deg) rotatey (360deg); -o-transform : rotatex (360deg) rotatey (360deg); 변환 : rotatex (360deg) rotatey (360deg);}}최종 효과가 완료되었습니다!
위는 CSS 3D의 구현의 예입니다. 도움이 필요한 학생들은 그것을 언급 할 수 있습니다. 이 사이트를 지원 해주셔서 감사합니다!