1 <style> 2 ul{ 3 list-style: none; 4 padding: 0; 5 425px; 6 height: 400px; 7 border: 1px solid black; 8 margin: 100px auto; 9 } 10 li{ 11 100px; 12 height: 100px; 13 float: left; 14 background-color: aqua; 15 font-size: 16px; 16 color: red; 17 text-align: center; 18 line-height: 100px; 19 transition: all 2s; 20 margin-left: 5px; 21 } 22 li:nth-child(1){ 23 transform: rotate(45deg); 24 } 25 li:nth-child(2){ 26 写一个参数就是代表沿着X轴移动 27 transform:translate(50px); 28 /*可以有两个参数 -个表示沿x轴移动的距离，一个表示沿y移动的距离 如果要盒子只沿着y轴移动那么就给两个参数*/ 29 /* transform: translate(0, 300px); 30 /* transform: translate( -300px, 300px); */ 31 /*专门设置沿着y轴移动*/ 32 transform: translateY(30px); 33 /*专门设置沿着x轴移动*/ 34 transform: translateX( 30px); 35 } 36 li:nth-child(3){ 37 transform: scale(0.5); 38 } 39 li:nth-child(4){ 40 transform: skew(30deg); 41 } 42 </style> 43 </head> 44 <body> 45 <!--二维两个坐标轴x轴和y轴 46 transform转换 47 平移translate()两个参数 分别是沿x轴移动的距离沿y轴移动的距离 48 49 如果只写一个参数表示只沿着 x轴移动如果指向让他沿着y轴移动 那么就把第一一个参数设为0， 第二个参数就表示沿着y轴移动 translateX专门设置沿着x轴移动 50 translateY专门设置沿着y轴移动 51 52 旋转rotate()参数是旋转的角度 带单位的角度 53 54 缩放scale()参数传入需要缩放的倍数 55 可以传入两个参数第一个参数表示宽 缩放第二个参数表示高缩放 56 如果只传如一个参数那么就表示宽高 同时缩放 57 58 扭曲skew() 参数传入角度 就是将正方形变成平行四边形 59 --> 60 <ul> 61 <li>旋转</li> 62 <li>平移</li> 63 <li>缩放</li> 64 <li>扭曲</li> 65 </ul> 66 </body>