3D 사진 벽을 만들기 위해 CSS를 사용
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div>
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
</div>
</body>
</html>
위의 코드가 작동 할 준비가되어, 당신이 모든 숫자가 될 수 있습니다 벽에 사진에 사진을 표시 할 내부 포장, 본체의 HTML 코드에 사업부를 넣어. 그런 다음 필기 스타일을 시작합니다.
body{perspective: 5800px;}
위의 코드는 단지 모든 사진을 넣을 수 있습니다 적어도 궤적을 사진 벽 충분한 3D 시청 거리를 설정하는 것입니다.
img{position:absolute;height:480px;width:320px;}
이 코드 패턴은, 그것이 임의의 이미지가 오버랩 할 위치를 제어 할 수있는 경우를, 폭 및 사진 벽의 이미지 높이의 특정 기준에 따라 물론 각각의 픽처를 절대 위치로 사진을 설정 당신은 320 * 480의 크기가 내가 인용 한 예입니다 설정할 수 있습니다.
img:nth-child(1){transform: translateZ(500px);}
img:nth-child(2){transform: translateZ(-500px);}
img:nth-child(3){transform:rotateY(45deg) translateZ(-500px);}
img:nth-child(4){transform:rotateY(45deg) translateZ(500px);}
img:nth-child(5){transform:rotateY(-45deg) translateZ(500px);}
img:nth-child(6){transform:rotateY(-45deg) translateZ(-500px);}
img:nth-child(7){transform:rotateY(90deg) translateZ(500px);}
img:nth-child(8){transform:rotateY(90deg) translateZ(-500px);}
자신의 축 Y에 대한 회전 각 사진의 각도, 각도 당신이 넣어 얼마나 많은 사진에 따라, N-사진 때문에이 코드는, 각 사진 패턴에 대해 개별적으로 설정, 각 사진은 순차적으로 예를 들어, 360 / N도 회전 여기서 I는.도 8은, 각 도면은 그 멀티 회전을 설정해야 넣어 이전 이미지 프로그레시브 층보다 8분의 360 = 45 °, 예컨대 0도, 45 개도, 90 개도, 135도, 180도, 225 도, 270도, 315 개도, 그리고 양으로 설정되어 그 Z 축 (각 이미지 이때 Z 축 방향 변경)되도록 각각의 이미지 (네거티브 수도 가득) 등거리 변위 이 여기에 너무, 내 글의 효과를 확산 45도 변위를 회전 할 - 500 픽셀 실제로 225도, 500 픽셀 변위 효과를 회전하는 것은 동일합니다.
도 계획 : 첫 번째 자체를 회전 다시 모든 방향으로 확산.
첫번째 회전하며, Z 축 방향 때문에 그 변위는 달리 다음이 일어나는 다시 변화한다 :
z 축 초기 방향에, 모든 이미지의 거리로 치환한다되도록 인해 모든 이미지의 변위를, 제 1 회전 후에 변위 여전히 함께 쌓아, 그것은 함께 혼잡 한 후 회전됩니다.
접착
div{margin:0 auto;margin-top:600px;
transform-style: preserve-3d;
animation:zhuan 6s linear infinite;height:480px;width:320px;}
@keyframes zhuan{
0%{transform:rotateX(-15deg) rotateY(0);}
100%{transform: rotateX(-15deg) rotateY(360deg);}
}
마지막 단계는 : rotateY (360deg)는 회전 애니메이션의 초기 설정 위치 감싸 모든 사진의 사업부로, 여기서주의 할 것은, 우리가 필요로 그렇지 않은 경우는 "회전"이 될 것 아닌 그림으로, 사업부 애니메이션을하는 것입니다 효과가,보기 쉬운 관점 제공 3D 후 전이 시간 (회전 속도가 변경 될 수있다), 그 다음, 무한 무한 루프로 설정 관측 I을 용이하게하기 위하여 애니메이션 6S에 제공되는 중간 마진 브라우저 화면에 제공되고, "회전"인 의 x 축에 대한 -15도 회전 사업부의 전체.
도이 영향을
끝
시청 당신에게 감사의를