> div>
위, 아래, 왼쪽, 오른쪽
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
:
코드 복사
큐브에서 설정한 속성에는 고정된 너비와 높이가 포함되며 위치는 상대적으로 설정됩니다. 큐브의 요소들이 제한된 영역 내에서 3D 애니메이션을 수행하려면 고정된 높이와 너비가 필요합니다. 높이와 너비를 100%로 설정하면 큐브의 요소가 페이지 전체에서 이동합니다.
전환은 애니메이션 관련 속성을 설정하는 데 사용됩니다. 변환 스타일: 보존-3d; 큐브의 모든 요소가 전체적으로 3D 효과를 생성하도록 합니다.
자세한 내용은 http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/을 참조하세요.
css:
코드 복사
코드는 다음과 같습니다.
# 큐브 {
위치: 상대;
높이: 400px; 다음 큐브의 6개 면에 대해 CSS 속성을 균일하게 설정합니다.
css
:
코드 복사
코드는 다음과 같습니다.
.face {
위치: 절대;
높이: 360px;
폭: 20px
배경색: rgba(50, 50, 50 , 0.7) ;
} 다음으로 6개의 면의 3D 관련 속성을 설정하고,rotateX 또는rotateY를 사용하여 큐브 표면 방향을 뒤집고,translateZ를 사용하여 큐브 표면을 3D 공간.
코드 복사
코드는 다음과 같습니다.
#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)";
}, 거짓);
课程就讲到这里,接下来大家可以动手尝试一下。