집 >웹 프론트엔드 >H5 튜토리얼 >css3 3d 변환 css3를 사용하여 동적 3d 큐브 만들기(html5 연습)_html5 튜토리얼 기술

css3 3d 변환 css3를 사용하여 동적 3d 큐브 만들기(html5 연습)_html5 튜토리얼 기술

WBOY원래의: 2016-05-16 15:50:371265검색

오늘 강좌에서는 CSS3를 활용하여 3D 큐브를 만드는 방법을 소개하겠습니다. 아래 링크를 통해 실제 효과를 살펴보실 수 있으며, 상하좌우 키를 조작하여 큐브 뒤집기 효과를 얻으실 수 있습니다.
데모 주소: http://www.jb51.net/jiaoben/70022.html
만드는 방법부터 시작해 보겠습니다.
html:

코드 복사

코드는 다음과 같습니다.

위, 아래, 왼쪽, 오른쪽

Lorem ipsum.

새로운 형태의 탐색이 재미있습니다. >

3D 큐브 회전하기

위 html에서 클래스 얼굴이 있는 6개의 div는 각각 클래스를 사용하여 큐브의 6개 면을 나타냅니다. 1에서 6까지의 이름으로 구별됩니다. 외부에는 큐브와 실험이라는 ID가 있는 두 개의 컨테이너 레이어가 있습니다. 둘 중 하나가 없으면 3D 효과가 생성될 수 없습니다.
실험은 렌즈 역할을 합니다. 내부 요소에 3D 효과가 나타나도록 초점을 맞춥니다.
perspective 속성은 z축 평면의 깊이를 정의하고 평면 위와 아래 요소의 상대적 크기도 정의합니다. 일반적으로 원근 값이 작을수록 개체는 더 커지고 사용자에게 가까워집니다. 원근 값이 클수록 개체는 더 작아지고 사용자로부터 멀어집니다. http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html에서 효과를 확인할 수 있습니다.
perspective-origin 속성은 Perspective의 출처를 정의합니다.

css
:

코드 복사

코드는 다음과 같습니다.

#실험 { -webkit-perspective: 800; -o-perspective: 800

-webkit; -perspective-원점: 50% 200px;-moz-perspective-원점: 50% 200px; >}

큐브에서 설정한 속성에는 고정된 너비와 높이가 포함되며 위치는 상대적으로 설정됩니다. 큐브의 요소들이 제한된 영역 내에서 3D 애니메이션을 수행하려면 고정된 높이와 너비가 필요합니다. 높이와 너비를 100%로 설정하면 큐브의 요소가 페이지 전체에서 이동합니다.
전환은 애니메이션 관련 속성을 설정하는 데 사용됩니다. 변환 스타일: 보존-3d; 큐브의 모든 요소가 전체적으로 3D 효과를 생성하도록 합니다.
자세한 내용은 http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/을 참조하세요.
css:

코드 복사

코드는 다음과 같습니다.

# 큐브 {
위치: 상대;
높이: 400px;

너비:

-webkit-transform 2s 선형; moz-transform: -moz-transform 2s 선형; -o-transform 2s 선형; 🎜>- moz-변환 스타일: 보존-3d; -o-변환 스타일: 보존-3d; 변형 스타일: 보존-3d;

다음 큐브의 6개 면에 대해 CSS 속성을 균일하게 설정합니다.

css
:

코드 복사

코드는 다음과 같습니다.

.face {
위치: 절대;

높이: 360px;
폭: 20px
배경색: rgba(50, 50, 50 , 0.7) ; }

다음으로 6개의 면의 3D 관련 속성을 설정하고,rotateX 또는rotateY를 사용하여 큐브 표면 방향을 뒤집고,translateZ를 사용하여 큐브 표면을 3D 공간.

css:

코드 복사

코드는 다음과 같습니다.

#cube .one {
-webkit-transform:rotateX(90deg)translateZ(200px);
-moz-transform:rotateX(90deg)translateZ(200px);
-o-transform:rotateX(90deg)translateZ(200px);
변환: 회전X(90deg) 번역Z(200px);
}
#cube .two {
-webkit-transform: 번역Z(200px);
-moz-transform: 번역Z(200px);
-o-transform: 번역Z(200px);
변환: 번역Z(200px);
}
#cube . three {
-webkit-transform:rotateY(90deg)translateZ(200px);
-moz-transform:rotateY(90deg)translateZ(200px);
-o-transform:rotateY(90deg)translateZ(200px);
변환: 회전Y(90도) 번역Z(200px);
}
#cube .four {
-webkit-transform:rotateY(180deg)translateZ(200px);
-moz-transform:rotateY(180deg)translateZ(200px);
-o-transform:rotateY(180deg)translateZ(200px);
변환: 회전Y(180deg) 번역Z(200px);
}
#cube .five {
-webkit-transform:rotateY(-90deg)translateZ(200px);
-moz-transform:rotateY(-90deg)translateZ(200px);
-o-transform:rotateY(-90deg)translateZ(200px);
변환: 회전Y(-90deg) 번역Z(200px);
}
#cube .six {
-webkit-transform:rotateX(-90deg)translateZ(200px);
-moz-transform:rotateX(-90deg)translateZ(200px);
-o-transform:rotateX(-90deg)translateZ(200px);
변환: 회전X(-90deg) 번역Z(200px);
}

키 다운 작업果。
javascript：

复主代码

代码如下:

var xAngle = 0, yAngle = 0;
document.addEventListener('keydown', function(e)
{
switch(e.keyCode)
{
case 37: // 왼쪽
yAngle -= 90;
break;
case 38: // 위쪽
xAngle = 90;
break
case 39: // 오른쪽
yAngle
case; 40: // 아래로
xAngle -= 90;
break;
}
$('cube').style.webkitTransform = "rotateX(" xAngle "deg) RotateY(" yAngle " deg)";
}, 거짓);

课程就讲到这里,接下来大家可以动手尝试一下。

성명：

이전 기사：html5와 css3를 사용하여 Google 그래피티 애니메이션을 완성하는 방법다음 기사：html5와 css3를 사용하여 Google 그래피티 애니메이션을 완성하는 방법

css3 3d 변환 css3를 사용하여 동적 3d 큐브 만들기(html5 연습)_html5 튜토리얼 기술

관련 기사