1.transformar
1 <! DOCTYPE html > 2 < html > 3 < head > 4 < meta charset = "utf-8" > 5 < title >变形</ title > 6 < style > 7 8 .box1 { 9 width : 200px ; 10 altura : 200 px ; 11 color de fondo : #bfa ; 12 13 / * 14 15 Transformar, puede realizar traslación, ampliación, reducción, rotación, etc. en el elemento a través de la deformación. 16 Todos los efectos de deformación no afectarán el diseño de la página. Esta es la apariencia del elemento. 17 Use la transformación para establecer la deformación Efecto 18 * / 19 / * 20 traslación 21 translateX traduce a lo largo del eje x 22 elementos positivos se mueven hacia la derecha, los valores negativos se mueven hacia la izquierda (el elemento no gira) 23 translateY traduce a lo largo del eje y 24 elementos positivos se mueven hacia abajo Mover, el elemento negativo se mueve hacia arriba (el elemento no gira) 25 * / 26 27 transición : todos .2s ; 28 29 } 30 31 .box1: hover { 32 / * transform: translateY (-10px); * / 33 / * box-shadow: rgba (0,0,0, .3) 0 10px 10px; * / 34 35 / * La unidad de porcentaje al traducir se calcula en relación a sí misma * / 36 transform : translateX (50%) ; 37 } 38 39 .box2 { 40 width : 200px ; 41 height : 200px ; 42 color de fondo : tomate ; 43 } 44 45 46 .box3 { 47 48 posición : absoluto ; 49 color de fondo : verde amarillo ; 50 51 restantes : 50% ; 52 arriba : 50% ; 53 transform : translateX (-50%) translateY (-50%) ; 54 } 55 </ estilo > 56 </ head > 57 < body > 58 59 <! - <div class = "box1"> </div> -> 60 <! - 61 <div class = "box2"> </div> - > 62 63 < div class = "box3" >我 是 一个 box3 </ div > 64 65 66 </ body > 67 </ html >