HTML5+CSS3: álbum de efectos de troyano rotativo 3D

El propósito de este blog es porque la instancia seductora de la instancia especial HTML5 CSS3 CSS3 creó el efecto 3D Flop de Baidu TiBa.

Gráfico de efectos: Hola, hice algunas fotos de la graduación universitaria en un troyano rotativo, girando alrededor de mi gran texto y la gracia del cultivo de mi alma mater ~

Los atributos de perspectiva incluyen dos atributos: ninguno y la longitud de la unidad.

Entre ellos, el valor predeterminado del atributo de perspectiva es ninguno, lo que significa que el objeto 3D se ve en un ángulo ilimitado, pero parece plano. Otro valor <Langth> acepta un valor de una unidad mayor que 0. Y su unidad no puede ser porcentaje. Cuanto mayor sea el valor de <langth>, más lejos aparece el ángulo, para crear una fuerza bastante baja y un cambio de espacio 3D muy pequeño. Por el contrario, cuanto más pequeño sea este valor, más cerca es el ángulo, más cerca, para crear un ángulo de alta intensidad y un gran cambio 3D. En pocas palabras: cuando se establece la configuración de perspectiva, cuanto más pequeña sea que cuanto más obvio sea el efecto 3D, más cerca están sus ojos más cerca del objeto 3D, y viceversa.

Suponiendo que cuando establezca una perspectiva: 300px, cuanto más pequeño sea el valor de la traducción, menor es el tamaño del elemento infantil.

1. En primer lugar, el contenedor de todas las imágenes es la posición: absoluto, superpuesto juntos, y luego coloque el rotatey a la vez a 40*i, i = 0, 1, 2 ... 9;

2. Luego establezca la traducción para cada imagen del contenedor.

HTML:

 <! Text/javascript src = ../../ jQuery-1.8.3.js> </script> <script type = text/javascript> // alerta (64/math.tan (20/180 * math.pi)))) ); ; Elemento de retorno;} $ (function () {var deg = -40, i = 1; $ (#Container) .Chick (function () {transform ($ (this) [0], rotatey ( + (deg * ( deg *] i ++)+deg))})});}); /1.jpg/> <span> Haz una cosa a la vez, y te vaya bien .. </span> </li> <li> <img src = img/2.jpg/> <span> haz una cosa en una hora, y haz bien. > <Img src = img/4.jpg/> <span> Whatver Word haciendo es que la palabra está bien. . > </li> <li> <img src = img/7.jpg/> <span> Nunca ponga el cargo que puede hacer hoy hasta mañana. .jpg/> <span> Jack de todos los trands y maestro de ninguno. </li> </div> </body> </html "

CSS:

 li {ancho: 128px; 0, 0, .5); {wid th: 900px; JPG) No Repeat 0 0; -Transición: -WebKit-Transform 1S; (0deg) traducez (300px);} li: nth-child (1) {-webkit-traansform: rotatey (40deg) traducez (300px);} li: nth-child (2) {-webkit-transform: rotat ey ( 80deg) traducez (300px);} li: nth-child (3) {-webkit-transform: rotatey (120deg) traducez (300px);} li: nth-child (4) {-webkit-transform: 16 0deg) traducez (300px);} li: nth-child (5) {-webkit-traansform: rotatey (200deg) traducez (300px);} li: nth-child (6) {-webkit-transform: rotatey (240deg) traducir (TiZ ( 300px);} li: nth-child (7) {-webkit-traansform: rotatey (280deg) traducez (300px);} li: nth-child (8) {-webkit-transform: rotatey (300px);} li: NTH-Child (9) {-Webkit-Transform: Rotatey (360deg) traducez (300px);}

Div#Stage es el escenario, la perspectiva de los establecimientos, cada li se rota y traduce el contenedor de#para establecer El valor predeterminado, significa que todos los sub -elementos se presentan en planos 2D. Preserve-3D indica que todos los subelementos se presentan en el espacio 3D. Si el valor del estilo de transformación se establece en una reserva-3D en un elemento, indica que no realiza una operación de exhibición plana, y todo su subelemento se encuentra en el espacio 3D. En circunstancias normales, este atributo se usa para el elemento de ejecución de los efectos de animación 3D, es decir, utiliza efectos de animación 3D, por lo que sus subelementos deben estar en el espacio 3D.

Una cosa a la que prestar atención: en este ejemplo, el efecto de animación es en realidad el clic del mouse. Es para rotar este troyano, por lo que solo necesita cambiar el ángulo de Rotatey 40 del contenedor Div#cada vez.

Lo anterior es todo el contenido de este artículo.