다음의 영향이도에서 촬영.
마우스 사방에서 입력 할 수 있고, 마우스가 입력의 회전 큐브로 오른쪽으로 오른쪽에서 왼쪽으로, 위에서부터의 입력과 같은 입방체는 최상부 아래에서 회전하고, 회전 방향에 대응 따른 것
어떻게 달성하기 위해 :
1 차원 회전은 주로 기록 CSS3에 사용
도 2에서, 전체 레이아웃이 분할되고
마우스를 구현 소량의 JS를 이용하여 3, 이벤트로부터 이동
HTML은 다음을 달성하기 위해 :
<DIV 클래스 = "래퍼">
<UL>
<LI>
<DIV 클래스 = "상자">
<DIV 클래스 = "쇼">
<IMG SRC = "./ IMG / 1.png"ALT = "">
</ DIV>
<DIV 클래스 = "숨기기"> 숨기기 </ DIV>
</ DIV>
</ 리>
<LI>
<DIV 클래스 = "상자">
<DIV 클래스 = "쇼">
<IMG SRC = "./ IMG / 2.png"ALT = "">
</ DIV>
<DIV 클래스 = "숨기기"> 숨기기 </ DIV>
</ DIV>
</ 리>
<LI>
<DIV 클래스 = "상자">
<DIV 클래스 = "쇼">
<IMG SRC = "./ IMG / 3.png"ALT = "">
</ DIV>
<DIV 클래스 = "숨기기"> 숨기기 </ DIV>
</ DIV>
</ 리>
</ UL>
</ DIV>
<스크립트 SRC = "./ JS / JQuery와-3.3.1.min.js"> </ script>
<스크립트 SRC = "./ JS /하는 index.js를"> </ script>
UL 리 작은 상자 (증거이다 인해 숨김 표면 이외에) 두 개의면을 갖는 작은 상자 숨길 블록의 회전 위치를 변경하는데 필요한 시간을 추가하는 여기에 사용
CSS 스타일을 달성하기 위해 :
* {
여백 : 0;
패딩 : 0;
목록 스타일 : 없음;
}
.싸개{
폭 : 800 픽셀;
마진 : 100 픽셀 자동;
국경 : 1 픽셀의 고체 # 000;
경계 반경 : 10px;
표시 : 플렉스;
정당화 - 내용 : 센터;
정렬-항목 : 센터;
}
.wrapper UL {
폭 : 100 %;
/ * 높이 200 픽셀; * /
표시 : 플렉스;
정당화 - 내용 : 센터;
정렬-항목 : 센터;
}
UL 리 .wrapper {
폭 : 200 픽셀;
높이 : 200 픽셀;
여백 : 20 픽셀;
관점 : 1000px;
}
.wrapper UL 리 .box {
폭 : 200 픽셀;
높이 : 200 픽셀;
위치 : 상대;
변환 - 스타일 : 보존-차원;
애니메이션 : 편의성 밖으로 전달 o.3s;
}
.wrapper UL 리 .box .show {
위치 : 절대;
폭 : 100 %;
신장 : 100 %;
}
.wrapper UL 리 .box .show IMG {
폭 : 100 %;
신장 : 100 %;
}
.wrapper UL 리 .box의 .hide {
위치 : 절대;
폭 : 100 %;
신장 : 100 %;
텍스트 정렬 : 센터;
폰트 크기 : 30 픽셀;
색상 : #fff;
표시 : 플렉스;
정당화 - 내용 : 센터;
정렬-항목 : 센터;
배경 색상 : # 000;
}
.wrapper UL 리 .box .show {
변환 : translateZ (100 픽셀)를;
}
.wrapper UL 리 .box의 .hide {
변환 : translateZ (-100px)를;
}
.wrapper 울 리 .box.in 탑 .hide,
.wrapper 울 리 .box.out 탑 .hide {
변환 : ROTATE3D (1,0,0,90deg) translateZ (100 픽셀);
}
.wrapper 울 리 .box.in 바닥 .hide,
.wrapper UL 리 .box.out 바닥 .hide {
변환 : ROTATE3D (1,0,0을 -90deg) translateZ (100 픽셀);
}
.wrapper 울 리, .hide을 .box.in 왼쪽
.wrapper 울 리는 .hide을 {.box.out 왼쪽
변환 : ROTATE3D (0,1,0을 -90deg) translateZ (100 픽셀);
}
.wrapper 울 리 .box.in 오른쪽 .hide,
.wrapper 울 리 .box.out 오른쪽 .hide {
변환 : ROTATE3D (0,1,0,90deg) translateZ (100 픽셀);
}
.wrapper 울 리 .box.in 정상 {
애니메이션 이름 :에 정상;
}
.wrapper .box.out 정상 {
애니메이션 이름 : 밖으로 탑;
}
.wrapper 울 리 .box.in 바닥 {
애니메이션 이름 :에 바닥;
}
.wrapper .box.out 바닥 {
애니메이션 이름 : 밖으로 바닥;
}
.wrapper 울 리는 .box.in 왼쪽 {
애니메이션 이름 : 왼쪽에 -;
}
.wrapper .box.out 왼쪽 {
애니메이션 이름 : 왼쪽에서 -;
}
.wrapper 울 리 .box.in 오른쪽 {
애니메이션 이름 :에서 오른쪽;
}
.wrapper .box.out 오른쪽 {
애니메이션 이름 : 밖으로 오른쪽;
}
에서 정상 @keyframes {
{0 %
변환 : 회전 (0deg)를;
}
100 % {
변환 : rotateX (-90deg)하는 단계;
}
}
@keyframes 아웃 상단 {
{0 %
변환 : rotateX (-90deg)하는 단계;
}
100 % {
변환 : rotateX (0deg)를;
}
}
의 바닥 @keyframes {
{0 %
변환 : 회전 (0deg)를;
}
100 % {
변환 : rotateX (90DEG)를;
}
}
@keyframes 밖으로 바닥 {
{0 %
변환 : rotateX (90DEG)를;
}
100 % {
변환 : rotateX (0deg)를;
}
}
@keyframes에서 왼쪽 {
{0 %
변환 : rotateY (0deg)를;
}
100 % {
변환 : rotateY (90DEG)를;
}
}
밖으로 왼쪽 @keyframes {
{0 %
변환 : rotateY (90DEG)를;
}
100 % {
변환 : rotateY (0deg)를;
}
}
에서 오른쪽 @keyframes {
{0 %
변환 : rotateY (0deg)를;
}
100 % {
변환 : rotateY (-90deg)하는 단계;
}
}
밖으로 오른쪽 @keyframes {
{0 %
변환 : rotateY (-90deg)하는 단계;
}
100 % {
변환 : rotateY (0deg)를;
}
}
그 회전 위치로 이동하기 전에 박스를 숨기고, 필요에 들어가기 전에, 실현 된 두 개의 클래스로 나누어 두 경우의 입력 및 출력을 나눔으로써 이름있는 사용 애니메이션의 제어 박스를, 클래스 명을 추가함으로써 달성 회전 회전 JS하여 클래스 이름 추가를 제어하면서
여기서, X 축에서 강조 회전 회전이 포지티브 각도, 우측 Y 축의 동안 외부 회전 각도가 네가티브 인이 정 회전 각도이다 왼쪽으로 회전도 바뀌기 때문에 변화시킬 네거티브 각도는 Z 축의 상기 회전은 순서를 작성하는 과정은 매우 중요하다.
달성 여기에 달성의 탑 밖으로 탑, 공감 바닥. 같은 왼쪽과 오른쪽 등을 달성하기 위해
JS 코드 :
기능 이벤트 볼륨 () {
$ ( '. 상자'). ( 'mouseenter'에, 기능 (전자) {
addClassTo ( '년'이, 예);
}). ( '하는 MouseLeave'함수 (E)에 {
addClassTo ( '아웃'이, 예);
})
}
이벤트 볼륨 ();
함수 getDirect (DOM, E) {
VAR X = e.offsetX - dom.offsetWidth / 2;
여기서, Y = e.offsetY - dom.offsetHeight / 2;
VAR의 D = (Math.round (((Math.atan2 (Y, X) * (180 / Math.PI로)) + 180) / 90) + 3) 4 %;
반환 d;
}
함수 addClassTo (DOM, 즉, 상태) {
VAR의 D = getdirect DOM (전자);
방향이었다 = "";
스위치 (d) {
경우 0 : {
방향 = '정상';
단절;
}
사례 1 : {
방향 = '- 오른쪽';
단절;
}
사례 2 : {
방향 = '-bottom';
단절;
}
사례 3 : {
방향 = '- 왼쪽';
단절;
}
기본값 : 휴식;
}
$ (DOM) .attr ( "클래스", "박스"상태 + + 방향);
// 복귀 방향;
}
클래스의 이름 아웃에 첨가시 JS 함수 판정 입력하거나 외출 사용되고,
VAR의 D = (Math.round (((Math.atan2 (Y, X) * (180 / Math.PI로)) + 180) / 90) + 3) % 4라는 문구가 들어오는 것을 결정하기 위해 사용되는 방향 ( 수직 및 수평), 그러나 (3)을 추가함으로써이 (4)의 나머지 부분에 오른쪽 방향으로 계산 한 후 0, 시계 방향으로 증가 임) 중심점은 작은 박스의 중앙으로 이동되고, 그 각도는 촬영 (0-4 계산 4 0 후 최상층에있는 나머지 부분들은 증가 나머지 3 반 시계 방향으로, 상기 도래 방향 것으로 판정된다.
음,이에이 작은 데모는, 잘 양해 해 주시기 바랍니다. CSS 3D 변환의 깊은 이해
