关于旋转

我就来看看

绕X轴旋转

1. <style type="text/css">
2. @keyframes xturn{
3. 15%{transform:rotateX(0deg) ; /*X轴旋转*/}
4. 85%{transform:rotateX(360deg) ; /*X轴旋转*/}
5. }
6. #x_div {
7. text-align:center;
8. width:400px;height:60px;
9. color:red;
10. background-color:#ccf;
11. font:bold 40px 楷体,楷体_gb2312;
13. transform-style:preserve-3d; /* 默认flat 2D */
14. animation:xturn 15s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */
16. }
18. </style>
20. <div id="x_div">绕X轴旋转</div>

复制代码

我就来看看

绕Y轴旋转

1. <style type="text/css">
2. @keyframes yturn{
3. 15%{transform:rotateY(0deg) ; /*Y轴旋转*/}
4. 85%{transform:rotateY(360deg) ; /*Y轴旋转*/}
5. }
6. #y_div {
7. text-align:center;
8. width:400px;height:60px;
9. color:red;
10. background-color:#ccf;
11. font:bold 40px 楷体,楷体_gb2312;
13. transform-style:preserve-3d; /* 默认flat 2D */
14. animation:yturn 15s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */
16. }
18. </style>
20. <div id="y_div">绕Y轴旋转</div>

复制代码

我就来看看

绕Z轴旋转

1. <style type="text/css">
2. @keyframes zturn{
3. 15%{transform:rotateZ(0deg) ; /*Z轴旋转*/}
4. 85%{transform:rotateZ(360deg) ; /*Z轴旋转*/}
5. }
6. #z_div {
7. text-align:center;
8. width:400px;height:60px;
9. color:red;
10. background-color:#ccf;
11. font:bold 40px 楷体,楷体_gb2312;
13. transform-style:preserve-3d; /* 默认flat 2D */
14. animation:zturn 15s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */
16. }
18. </style>
20. <div id="z_div">绕Z轴旋转</div>

复制代码

我就来看看

这是个综合示例

绕Y轴旋转 X、Z轴摆动

1. <style type="text/css">
2. @keyframes hturn{
3. 15%{transform:rotateY(0deg) rotateX(30deg) rotateZ(-15deg) ; /*Y轴旋转 X、Z轴摆动*/}
4. 85%{transform:rotateY(360deg) rotateX(-30deg) rotateZ(15deg) ; /*Y轴旋转 X、Z轴摆动*/}
5. }
6. #h_div {
7. text-align:center;
8. width:600px;height:60px;
9. color:red;
10. background-color:#ccf;
11. font:bold 40px 楷体,楷体_gb2312;
13. transform-style:preserve-3d; /* 默认flat 2D */
14. animation:hturn 15s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */
15. }
17. </style>
19. <div id="h_div">绕Y轴旋转 X、Z轴摆动</div>

复制代码

我就来看看

直接让embed标签旋转也行

我就来看看

1. <style type="text/css">
   
2. @keyframes gturn{
   
3.         15%{transform:rotateY(0deg)  rotateX(30deg)  rotateZ(-15deg) ;         /*Y轴旋转 X、Z轴摆动*/}
   
4.     85%{transform:rotateY(360deg)   rotateX(-30deg)  rotateZ(15deg) ;        /*Y轴旋转  X、Z轴摆动*/}
   
5. }
   
6. #gembed {
   
7.     text-align:center;
   
8.     width:800px;height:80px;
   
9. 
   
10.     transform-style:preserve-3d;     /* 默认flat 2D */
    
11.     animation:gturn   15s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */
    
12. }
    
13.        
    
14. </style>
    
15. 
    
16. <embed allownetworking="internal" allowscriptaccess="never" flashvars="mp3=http://link.hhtjim.com/kw/4392205.mp3&lrc=
    
17. [00:0.0]在雨中 - 华语群星
    
18. [00:58.63]在雨中 我送过你
    
19. [01:08.12]在夜里 我吻过你
    
20. [01:18.52]在春天 我拥有你
    
21. [01:29.47]在冬季 我离开你
    
22. [01:39.83]有相聚 也有分离
    
23. [01:49.57]人生本是一出戏
    
24. [01:61.33]有欢笑 也有哭泣
    
25. [01:72.13]不知谁能 谁能躲得过去
    
26. [01:83.98]你说人生艳丽我没有异议
    
27. [01:94.6]你说人生忧郁我不言语
    
28. [02:05.42]只有默默的承受这一切
    
29. [02:12.62]承受数不尽的春来冬去
    
30. [02:79.12]有相聚 也有分离
    
31. [02:87.85]人生本是一出戏
    
32. [02:99.92]有欢笑 也有哭泣
    
33. [03:10.52]不知谁能 谁能躲得过去
    
34. [03:22.82]你说人生艳丽我没有异议
    
35. [03:32.25]你说人生忧郁我不言语
    
36. [03:43.72]只有默默的承受这一切
    
37. [03:53.6]承受数不尽的春来冬去
    
38. [03:69.92]有相聚 也有分离
    
39. [03:78.67]人生本是一出戏
    
40. [03:89.8]有欢笑 也有哭泣
    
41. [04:01.03]不知谁能 谁能躲得过去
    
42. [04:13.22]你说人生艳丽我没有异议
    
43. [04:23.72]你说人生忧郁我不言语
    
44. [04:34.43]只有默默的承受这一切
    
45. [04:43.68]承受数不尽的春来冬去&gczt=楷体&gczh=32&gcys=00FF7F&gczzys=ff0000&gcljys=000000&gcljld=0.6&gcct=1"
    
46. invokeurls="false" quality="high" wmode="transparent" type="application/x-shockwave-flash"
    
47. src="http://dashan.link/zj/dqyhgczz.swf" id="gembed" >
    

复制代码

旋转并不需要复杂的嵌套代码，可以作用在任何实体标签上。

真真

我不会音画，对懂的朋友一定有帮助。谢谢老师！

湛蓝

向你学习、欣赏点赞

娟子

谢谢老师多种形式的旋转代码。收藏代码慢慢学习。
老师辛苦了，再谢！

我就来看看

真真 发表于 2020-8-27 11:06
我不会音画，对懂的朋友一定有帮助。谢谢老师！