이 블로그의 목적은 HTML5 CSS3 특수 인스턴스의 매혹적인 인스턴스가 Baidu Tieba의 3D 플롭 효과를 생성했기 때문입니다.
효과 차트 : 이봐, 나는 대학 졸업의 사진을 로타리 트로이 목마로 만들었고, 내 큰 텍스트를 돌아 다니며 내 알마 교의 재배의 은혜 ~ ~
1. 관점관점 속성에는 두 가지 속성이 포함됩니다 : 없음과 단위의 길이.
그중에서도 관점 속성의 기본값은 없음이므로 3D 객체는 무제한 각도로 보이지만 평평하게 보입니다. 다른 값 <Langth>는 0보다 큰 단위의 값을 허용합니다. 그리고 그 단위는 백분율이 될 수 없습니다. <langth>의 값이 클수록 각도가 더 높아서 강도가 매우 낮고 아주 작은 3D 공간 변화를 만듭니다. 반대로,이 값이 작을수록 각도가 가까워 질수록 높은 강도 각도와 큰 3D 변경을 생성합니다. 간단히 말하면 : 원근 설정이 설정되면 작을수록 3D 효과가 더 명백할수록 눈이 3D 객체에 가까워지고 그 반대도 마찬가지입니다.
2. Transform : TranslatedZ (길이)300px를 설정하면 번역 값이 더 작을수록 설정 값이 300px에 가까워지면 눈에 띄지 않는 것 같습니다.
위의 예의 핵심 :1. 우선, 모든 그림의 용기는 위치입니다. 절대, 함께 겹쳐 놓은 다음 한 번에 회전을 40*i, i = 0, 1, 2 ... 9로 설정합니다.
2. 그런 다음 컨테이너의 각 그림에 대해 Translatez를 설정하십시오.
HTML :
<! Text/JavaScript SRC = ../../ jQuery-1.8.3.js> </script> <script type = text/javaScript> // alert (64/math.tan (20/180 * math.pi)) ); ; return 요소} $ (function () {var deg = -40, i = 1; $ (#container) .click (function () {transform ($ (this) [0], rotatey ( + (deg *) deg *] i ++)+deg)})});}); /1.jpg/> <span> 한 번에 한 가지 일을하고 잘하십시오 .. </span> </li> <li> <img src = img/2.jpg/> <span> 한 가지를 시간, 그리고 잘하십시오 > <img src = img // 4.jpg/> <span> 단어는 단어가 잘하는 것입니다 당신의 안전. li> <li> <img src = img/7.jpg/> <span> 내일까지 할 수 있습니다. > <span> 모든 트랜드의 잭과 마스터 > </div> </body> </html "CSS :
Li {너비 : 128px; 0, 0, 0, 0, .5; 0, 0, 0, .5; wid th : Min-Height; jpg) 비정형 : 200px; -전환 : 전환 : -webkit-transform 스타일; (0DEG) Translatez (300px);} li : nth-Child (1) {-webkit-transform : rotatey (40deg) translatez (300px);} li : nth-Child (2) {-webkit-transform : Rotat Ey (Rotat Ey) 80deg) translatez (300px);} li : nth-Child (3) {-webkit-transform : rotatey (120deg) translatez (300px);} li : nth-Child (4) {-webkit-transform : 16 0deg) Translate (300px);} li : nth-Child (5) {-webkit-traansform : rotatey (200deg) translatez (300px);} li : nth-child (6) {-webkit-transform : rotatey (240deg) transez ( 300px);} li : nth-Child (7) {-webkit-transform : rotatey (280deg) translatez (300px);} li : nth-child (8) {-webkit-transform : rotatey (300px);} li : nth-Child (9) {-webkit-transform : rotatey (360deg) Translatez (300px);}Div#Stage는 관점을 설정하고, 각 Li는 Rotatey를 설정하고,#컨테이너는 -webkit-transform 스타일을 설정합니다 기본값은 모든 하위 요소가 2D 평면에 표시됨을 의미합니다. Preserve-3D는 모든 하위 요소가 3D 공간으로 표시됨을 나타냅니다. 변환 스타일의 값이 요소의 Preserve-3D로 설정된 경우, 평평한 전시 작업을 수행하지 않으며 그의 모든 하위 요소가 3D 공간에 위치 함을 나타냅니다. 정상적인 상황 에서이 속성은 3D 애니메이션 효과의 실행 요소, 즉 3D 애니메이션 효과를 사용하므로 하위 요소는 3D 공간에 있어야합니다.
주의를 기울여야 할 사항 :이 예에서는 애니메이션 효과는 실제로 Div#컨테이너 변경이 Div#컨테이너에 있습니다. 이 트로이 목마를 회전시키는 것이므로 매번 Div#컨테이너의 회전 40 각도 만 변경하면됩니다.
위는이 기사의 모든 내용입니다.