本文详细介绍了使用CSS实现的四种不同的变换效果：旋转、平移、缩放和倾斜，并提供了具体的HTML和CSS代码示例。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 .rotate { 10 margin: 100px 100px; 11 width: 200px; 12 height: 100px; 13 background-color: #3a9; 14 transform: rotate(80deg); 15 transform-origin: 0 0; 16 } 17 .translate { 18 margin: 50px 50px; 19 width: 200px; 20 height: 100px; 21 background-color: rgb(173, 179, 120); 22 transform: translate(300px, 50px ) 23 } 24 .scale { 25 margin: 50px 50px; 26 width: 40px; 27 height: 40px; 28 border-radius: 50%; 29 background-color: rgb(160, 231, 26); 30 transform: scale(2); 31 text-align: center; 32 line-height: 40px; 33 } 34 .skew { 35 margin: 50px 50px; 36 width: 50px; 37 height: 50px; 38 background-color: rgb(52, 35, 204); 39 transform: skew(70deg,0deg) 40 } 41 </style> 42 </head> 43 <body> 44 <div class="rotate">高</div> 45 <div class="translate">高</div> 46 <div class="scale">高</div> 47 <div class="skew">高</div> 48 </body> 49 </html>
扫一扫
847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
