css代码如下
1. body{ 2. padding: 100px; 3. } 4. /*初始设置所有盒子大小及颜色*/ 5. div{ 6. width: 100px; 7. height: 100px; 8. background: #0f0; 9. margin-top: 30px; 10. /*设置过渡时间及效果*/ 11. transition: all 5s; 12. } 13. 14. .a:active{ 15. /*旋转 角度为360度*/ 16. transform: rotate(360deg); 17. } 18. .b:active{ 19. /*放大为原来的2倍 缩小为0-1倍*/ 20. transform: scale(2); 21. } 22. .c:active{ 23. /*倾斜为原来的45度 可为正负*/ 24. transform: skew(45deg); 25. } 26. .d:active{ 27. /*平移 可设两个值 中间用 "," 分开 第一个值为x 第二个值为Y轴*/ 28. transform: translate(300px); 29. }
html代码如下：
1. <body> 2. <div class="a">旋转</div> 3. <div class="b">放大</div> 4. <div class="c">倾斜</div> 5. <div class="d">平移</div> 6. </body>
