댓글 : CSS3를 사용하여 3D 사면체를 만드는 방법에 대한 기사를 읽었습니다. 나는 그것이 꽤 좋다고 생각했기 때문에 그것을 꺼내서 Div+CSS를 사용하여 삼각형을 만드는 방법을 공유했습니다. 여기서는 먼저 관련 코드를 붙여 넣은 다음 원칙을 귀하에게 설명합니다.
오늘 저는 CSS3를 사용하여 3D 테트라 론을 만드는 방법에 대한 기사를 읽었습니다. 나는 그것이 꽤 좋다고 생각했기 때문에 그것을 꺼내서 당신과 공유했습니다.내가 당신과 공유하고 싶은 첫 번째 것은 Div+CSS를 사용하여 삼각형을 만드는 방법입니다. 여기서는 먼저 관련 코드를 붙여 넣은 다음 원칙을 귀하에게 설명합니다.
HTML :
<div>
<div> </div>
</div>
CSS :
<스타일 유형 = "텍스트/CSS">
#Pyramid {
위치 : 상대;
마진 : 100px 자동;
높이 : 500px;
너비 : 100px;
}
#Pyramid> div {
위치 : 절대;
국경 스타일 : 단단한;
국경비 : 200px 0 200px 346px;
}
#Pyramid> div : {이후 {
위치 : 절대;
내용 : "삼각형";
색상 : #ffff;
왼쪽 : -250px;
텍스트 정렬 : 센터;
}
#Pyramid> div : First-Child {
국경 색상 : #FF0000 투명 #FF0000 RGBA (50, 50, 50, 0.6);
}
</스타일>
실행 효과 :
원칙 분석 :
HTML 코드에서, 우리는 두 개의 div를 정의하고, 외부 div는 컨테이너 객체이며, 내부 div는 삼각형을 생성하는 데 사용됩니다. CSS 코드에서는 내부 DIV의 너비와 높이를 설정하지 않고 테두리의 3 개의 가장자리 (위, 아래 및 왼쪽)의 너비 만 설정합니다. 세면에 대해 다른 색상을 설정함으로써 각각 세 가지 다른 삼각형이됩니다.
현재, 우리는 단순히 상단과 하단의 색상을 투명한 색상으로 설정하면 동일 삼각형이 나타납니다.
#Pyramid> div : First-Child {
국경 색 : 투명한 투명 투명 RGBA (50, 50, 50, 0.6);
}
생식 이미지 :
그중에서도 빨간 원에 표시된 장소는 내부 DIV가있는 곳입니다. 그는 폭이 0이고 높이가 0 인 보이지 않는 물체이지만 실제로 존재합니다.
다음에 우리가 이야기 할 것은 3D 사면체를 구현하는 방법과 애니메이션을 만드는 방법입니다.
먼저 관련 코드를 붙여 넣으십시오.
HTML :
<div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
CSS :
<스타일 유형 = "텍스트/CSS">
#Pyramid {
위치 : 상대;
마진 : 100px 자동;
높이 : 500px;
너비 : 100px;
-webkit-transform 스타일 : Preserve-3D;
-webkit- 애니메이션 : 스핀 10s 선형 무한대;
-webkit-transform-origin : 116px 200px 116px;
-Moz 변환 스타일 : Preserve-3D;
-Moz-Animation : 스핀 10s 선형 무한대;
-Moz-transform-origin : 116px 200px 116px;
-ms-transform 스타일 : Preserve-3D;
-ms- 애니메이션 : 스핀 10s 선형 무한;
-ms-transform-origin : 116px 200px 116px;
변환 스타일 : Preserve-3D;
애니메이션 : 스핀 10s 선형 무한;
변환-오리 진 : 116px 200px 116px;
}
@-webkit-keyframes spin {
에서 {
-webkit-transform : rotatex (0deg) rotatey (0deg) rotatez (0deg);
}
에게 {
-webkit-transform : Rotatex (360deg) Rotatey (360deg) Rotatez (360deg);
}
}
@-moz-keyframes spin {
에서 {
-moz-transform : rotatex (0deg) rotatey (0deg) rotatez (0deg);
}
에게 {
-Moz 변환 : ROTATEX (360DEG) ROTATEY (360DEG) ROTATEZ (360DEG);
}
}
@-ms-keyframes spin {
에서 {
-ms-transform : rotatex (0deg) rotatey (0deg) rotatez (0deg);
}
에게 {
-ms-transform : rotatex (360deg) rotatey (360deg) rotatez (360deg);
}
}
@keyframes 스핀 {
에서 {
변환 : ROTATEX (0DEG) ROTATEY (0DEG) ROTATEZ (0DEG);
}
에게 {
변환 : ROTATEX (360DEG) ROTATEY (360DEG) ROTATEZ (360DEG);
}
}
#Pyramid> div {
위치 : 절대;
국경 스타일 : 단단한;
국경비 : 200px 0 200px 346px;
-webkit-transform-origin : 0 0;
-Moz-transform-origin : 0 0;
-ms-transform-origin : 0 0;
변환-오리진 : 0 0;
}
#Pyramid> div : {이후 {
위치 : 절대;
내용 : "삼각형";
색상 : #ffff;
왼쪽 : -250px;
텍스트 정렬 : 센터;
}
#Pyramid> div : First-Child {
국경 색 : 투명한 투명 투명 RGBA (50, 50, 50, 0.6);
-webkit-transform : rotatey (-19.5deg) rotatex (180deg) translatey (-400px);
-Moz 변환 : Rotatey (-19.5deg) Rotatex (180deg) Translatey (-400px);
-ms-transform : rotatey (-19.5deg) rotatex (180deg) translatey (-400px);
변환 : Rotatey (-19.5deg) Rotatex (180deg) Translatey (-400px);
}
#Pyramid> div : nth-Child (2) {
국경 색 : 투명한 투명 투명 RGBA (50, 50, 50, 0.6);
-webkit-transform : Rotatey (90deg) Rotatez (60deg) Rotatex (180deg) Translatey (-400px);
-Moz 변환 : Rotatey (90deg) Rotatez (60deg) Rotatex (180deg) Translatey (-400px);
-ms-transform : Rotatey (90deg) Rotatez (60deg) Rotatex (180deg) Translatey (-400px);
변환 : Rotatey (90deg) Rotatez (60deg) Rotatex (180deg) Translatey (-400px);
}
#Pyramid> div : nth-Child (3) {
국경 색 : 투명 투명 투명 RGBA (50, 50, 50, 0.9);
-webkit-transform : rotatex (60deg) Rotatey (19.5deg);
-Moz 변환 : ROTATEX (60DEG) ROTATEY (19.5deg);
-ms-transform : rotatex (60deg) rotatey (19.5deg);
변환 : rotatex (60deg) rotatey (19.5deg);
}
#Pyramid> div : nth-Child (4) {
국경 색 : 투명 투명 투명 RGBA (50, 50, 50, 0.8);
-webkit-transform : rotatex (-60deg) rotatey (19.5deg) translatex (-116px) translatey (-200px) translatez (326px);
-Moz-Transform : Rotatex (-60deg) Rotatey (19.5deg) Translatex (-116px) Translatey (-200px) Translatez (326px);
-ms-transform : rotatex (-60deg) rotatey (19.5deg) translatex (-116px) translatey (-200px) translatez (326px);
변환 : rotatex (-60deg) rotatey (19.5deg) translatex (-116px) translatey (-200px) translatez (326px);
}
</스타일>
이제 관련 코드를 설명하십시오.
HTML 코드는 이전 코드와 유사합니다.이 코드는 3 개의 추가 DIV가 있으며,이 코드는 사면체의 다른 3면으로 사용됩니다.
CSS 코드에서 #Pyramid> div : nth-Child (N)를 사용하여 Trihedron의 네면을 찾아 국경의 4면의 색상을 각각 삼각형으로 정의합니다. 변환 속성의 rotatex, rotatey, translatex, translatey 및 translatez 메소드를 통해 3D 공간에서 각도, 방향 및 위치를 설정하십시오. 여기에는 많은 수학적 지식이 포함되며 모든 사람은 관련 지식을 보충해야합니다.
상기 배열을 통해 사면체가 형성된다. 다음은 애니메이션 효과를 추가하는 것입니다. 여기에 사용 된 것은 매우 간단합니다. 즉 애니메이션과 키 프레임입니다. 사이트에서 CSS3과 관련된 속성을 배울 수 있으므로 여기에 너무 설명하지 않습니다.
이 기사 의이 시점에서 HTML 및 CSS 코드를 함께 붙여 넣어 최종 효과를 확인할 수 있습니다.
코드에는 이해하지 못하는 것이 있으므로 메시지를 남길 수 있습니다.