3_旋转.html 838 B

12345678910111213141516171819202122232425262728
  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. <title>Document</title>
  7. <style>
  8. .box{
  9. width: 200px;
  10. height: 200px;
  11. background-color: blue;
  12. margin: 100px auto;
  13. }
  14. .box:hover{
  15. /* rotate 旋转 正数表示顺时针旋转 负数 逆时针旋转 单位deg 度数 */
  16. transform: rotate(45deg);
  17. /* transform-origin 可以控制变形的原点 */
  18. /* transform-origin 后边可以写具体的数值 */
  19. /* transform-origin: 200px 200px; */
  20. /* transform-origin: right bottom; */
  21. /* transform-origin: center; */
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="box"></div>
  27. </body>
  28. </html>