1.transform
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>变形</title> 6 <style> 7 8 .box1{ 9 width: 200px; 10 height: 200px; 11 background-color: #bfa; 12 13 / * 14 15 Transform, you can perform translation, enlargement, reduction, rotation, etc. on the element through the deformation. 16 All the deformation effects will not affect the layout of the page. This is the appearance of the element. 17 Use transform to set the deformation Effect 18 * / 19 / * 20 translation 21 translateX translates along the x axis 22 -positive value elements move to the right, negative values move to the left (the element does not rotate) 23 translateY translates along the y axis 24 -positive value elements down Move, the negative element moves upward (the element does not rotate) 25 * / 26 27 transition : all .2s ; 28 29 } 30 31 .box1: hover { 32 / * transform: translateY (-10px); * / 33 / * box-shadow: rgba (0,0,0, .3) 0 10px 10px; * / 34 35 / * The unit of percentage when translating is calculated relative to itself * / 36 transform : translateX (50%) ; 37 } 38 39 .box2 { 40 width : 200px ; 41 height : 200px ; 42 background-color: tomato; 43 } 44 45 46 .box3{ 47 48 position: absolute; 49 background-color: greenyellow; 50 51 left: 50%; 52 top:50%; 53 transform: translateX(-50%) translateY(-50%); 54 } 55 </style> 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>