HTML5 CSS3: 3D 회전식 효과 앨범

이 블로그의 목적은 Baidu Tieba의 3D 플립 효과를 만들기 위해 이전 HTML5 CSS3 주제에서 CSS3의 매력적인 예에서 언급되지 않은 CSS 3D 효과에 대한 더 중요한 지식 포인트가 있기 때문입니다. 그리고 번역Y

렌더링: ㅎㅎ 모교의 은혜를 잊지않고 대학졸업사진 몇장을 회전목마로 만들어서 문과전공을 돌고있습니다~



1.spective

perspective 속성에는 없음과 단위가 있는 길이 값이라는 두 가지 속성이 포함됩니다.

perspective 속성의 기본값은 없음입니다. 이는 3D 개체를 무한한 각도에서 볼 수 있지만 평면적으로 보인다는 의미입니다. 또 다른 값인 는 0보다 큰 길이 단위의 값을 허용합니다. 그리고 그 단위는 백분율 값이 될 수 없습니다. <길이> 값이 클수록 각도가 더 멀리 나타나고 3D 공간에서 강도가 다소 낮아지고 변화가 거의 없습니다. 반대로 이 값이 작을수록 각도가 더 가까워져 각도가 강해지고 3D 변형이 커집니다. 간단히 말하면, 원근감이 길이를 설정할 때 길이가 작을수록 3D 효과가 더 분명해지고 눈이 3D 개체에 더 가까워지며 그 반대도 마찬가지입니다.

2.transform:translateZ(length)

spective:300px를 설정했다고 가정하면,translateZ의 값을 작게 설정할수록 서브의 크기도 작아집니다. -요소가 설정되면 300px에 가까울수록 요소가 앞에 있는 것처럼 보입니다. 300px를 초과하면 시야 뒤쪽에 도달하여 요소가 보이지 않습니다.

위 예제의 핵심:

1. 먼저 모든 이미지 컨테이너가 위치 지정됩니다: 절대, 함께 중첩된 다음 회전 Y를 40*i로 설정합니다. i = 0, 1, 2...9; 모든 그림은 꽃과 같은 모양으로 교차합니다

2. 그런 다음 각 그림의 컨테이너에 대해translateZ를 설정하면 모든 그림이 바깥쪽으로 이동합니다. 해당 각도에서 큰 원으로 확장하면 위 그림과 같은 효과가 나타납니다.
주의할 점: 이 예에서 실제 애니메이션 효과는 마우스 클릭으로 인해 발생하고, p#Container는 RotateY를 부적절하게 변경하고, 모든 그림 요소는 p#container에 있으며 캐러셀 효과로 표시되었습니다. , 지금 해야 할 일은 트로이 목마를 회전시키는 것이므로 매번 p#container의 회전 Y 40 각도만 변경하면 됩니다.

위 내용은 HTML5 css3: 3D Carousel Effect Album 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!



-->