CSS3 변환 CSS3을 사용하여 동적 3D 큐브를 생성합니다 (HTML5 연습)

오늘의 과정에서는 CSS3을 사용하여 3D 큐브를 만드는 방법을 소개합니다. 아래 링크를 통해 실제 효과를 탐색하고 왼쪽 및 오른쪽 키를 작동하여 큐브의 플립 효과를 달성 할 수 있습니다.

만드는 방법부터 시작하겠습니다.

<div id = "실험">

<div id = "Cube">

<div>

한 얼굴

</div>

<div>

위, 아래, 왼쪽, 오른쪽

</div>

<div>

Lorem Ipsum.

</div>

<div>

새로운 형태의 내비게이션은 재미 있습니다.

</div>

<div>

회전 3D 큐브

</div>

<div>

더 많은 콘텐츠

</div>

</div>

</div>

위의 HTML에서 얼굴로 클래스가있는 6 개의 div는 큐브의 6면을 나타내며 클래스 이름을 1 ~ 6 개로 사용하여 구별됩니다. 외부 컨테이너에는 ID 큐브와 실험이있는 2 개의 컨테이너가 포함되어 있습니다. 두 층 모두 필요합니다. 아무도 없으면 3D 효과를 생성 할 수 없습니다.

그 중에서 실험은 렌즈의 역할을합니다. 내부 요소에 3D 효과를 표시 할 수 있도록 초점 길이를 설정하십시오.

관점 속성은 z 축 평면의 깊이를 정의하고 평면 위와 아래의 요소의 상대적 치수를 정의합니다. 일반적으로 관점 값이 작을수록 물체가 클수록 더 가까이 있습니다. 관점 값이 클수록 물체가 작을수록 더 멀리 떨어져 있습니다. http://www.webkit.org/blog-files/3d-transforms/perspection-by-example.html을 통해 효과를 볼 수 있습니다.

원근-원래의 속성은 관점의 기원을 정의합니다.

#실험 {

-webkit-perspective : 800;

-Moz-Perspective : 800;

-o-perspective : 800;

관점 : 800;

-webkit-persective-origin : 50% 200px;

-Moz-Persective-Origin : 50% 200px;

-o-persective-origin : 50% 200px;

원근-원산지 : 50% 200px;

}

큐브에 의해 설정된 특성에는 고정 너비와 높이가 포함되어 있으며 상대적으로 위치를 설정합니다. 큐브의 요소가 정의 된 영역 내에서 3D 애니메이션을 수행 할 수 있도록 고정 높이와 너비가 필요합니다. 높이와 너비를 100%로 설정하면 큐브의 요소가 전체 페이지 범위에서 이동합니다.

전환은 애니메이션 관련 속성을 설정하는 데 사용됩니다. 변환 스타일 : Preserve-3D; 큐브의 모든 요소는 전체적으로 3D 효과를 생성합니다.

자세한 내용은 http://www.zhangxinxu.com/wordpress/2012/09/css3/">css3-3d-transform-perspection-animate-transition/을 탐색 할 수 있습니다.

CSS :

#cube {

위치 : 상대;

마진 : 100px 자동;

높이 : 400px;

너비 : 400px;

-webkit-transition : -webkit-transform 2s 선형;

-Moz-transition : -moz 변환 2s 선형;

-O- 변환 : -o-ransform 2s 선형;

전환 : 2S 선형 변환;

-webkit-transform 스타일 : Preserve-3D;

-Moz 변환 스타일 : Preserve-3D;

-O- 변형 스타일 : Preserve-3D;

변환 스타일 : Preserve-3D;

}

다음으로 큐브의 6면에 대한 CSS 속성을 설정하십시오.

.얼굴 {

위치 : 절대;

높이 : 360px;

너비 : 360px;

패딩 : 20px;

배경색 : RGBA (50, 50, 50, 0.7);

}

다음으로 6면의 3D 관련 특성을 설정하고 Rotatex 또는 Rotatey를 사용하여 큐브 표면의 플립을 달성하고 Translatez를 사용하여 3 차원 공간에서 큐브 표면의 움직임을 달성합니다.

#CUBE .ONE {

-webkit-transform : rotatex (90deg) translatez (200px);

-Moz-transform : Rotatex (90deg) Translatez (200px);

-o-transform : rotatex (90deg) translatez (200px);

변환 : rotatex (90deg) translatez (200px);

}

#cube .two {

-webkit-transform : Translatez (200px);

-Moz 변환 : Translatez (200px);

-o-transform : Translatez (200px);

변환 : Translatez (200px);

}

#cube. Three {

-webkit-transform : Rotatey (90deg) Translatez (200px);

-Moz 변환 : Rotatey (90deg) Translatez (200px);

-o-transform : rotatey (90deg) translatez (200px);

변환 : Rotatey (90deg) Translatez (200px);

}

#cube .four {

-webkit-transform : Rotatey (180deg) Translatez (200px);

-Moz 변환 : Rotatey (180deg) Translatez (200px);

-o-transform : rotatey (180deg) Trranslatez (200px);

변환 : Rotatey (180deg) Translatez (200px);

}

#cube .five {

-webkit-transform : rotatey (-90deg) Translatez (200px);

-Moz-transform : Rotatey (-90deg) Translatez (200px);

-o-transform : rotatey (-90deg) translatez (200px);

변환 : rotatey (-90deg) translatez (200px);

}

#cube .six {

-webkit-transform : rotatex (-90deg) translatez (200px);

-Moz-transform : Rotatex (-90deg) Translatez (200px);

-o-transform : rotatex (-90deg) translatez (200px);

변환 : rotatex (-90deg) translatez (200px);

}

마지막으로해야 할 일은 키 다운 이벤트를 페이지에 바인딩하여 위, 아래, 왼쪽 및 오른쪽 키를 누르면 큐브 플립 모션 효과가 달성되는 것입니다.

자바 스크립트 :

var xangle = 0, yangle = 0;

document.addeventListener ( 'keydown', function (e)

{

스위치 (e.keycode)

{

사례 37 : // 왼쪽

yangle- = 90;

부서지다;

사례 38 : // UP

Xangle += 90;

부서지다;

사례 39 : // 오른쪽

yangle += 90;

부서지다;

사례 40 : // 다운

Xangle- = 90;

부서지다;

};

$ ( 'cube'). Style.wybkittransform = "rotatex ("+xangle+"deg) rotatey ("+yangle+"deg);

}, 거짓);

그게 코스의 모든 것입니다. 다음에 시도해 볼 수 있습니다.