立体旋转圆环

2022-06-30 15:31:14 阅读：140 来源： 互联网

标签：rotateX 100% transform 旋转立体 width height border 圆环

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style> @keyframes myfirst { 0% { transform: rotateY(0deg) } 100% { transform: rotateY(360deg) } } .round_warp { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; animation: myfirst 5s linear infinite; transform-origin: center; } .round { width: 100%; height: 100%; border: 10px solid #ccc; box-sizing: border-box; border-radius: 50%; position: absolute; left: 0; top: 0; } .one { transform: rotateX(60deg); } .two { transform: rotateX(100deg); } </style> <body class="ant-row"> <div class="round_warp"> <div class="round one">1</div> <div class="round two">2</div> </div> </body> </html> <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style> @keyframes myfirst { 0% { transform: rotateY(0deg) }
100% { transform: rotateY(360deg) } }
.round_warp { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; animation: myfirst 5s linear infinite; transform-origin: center; }
.round { width: 100%; height: 100%; border: 10px solid #ccc;
box-sizing: border-box; border-radius: 50%; position: absolute; left: 0; top: 0; }
.one { transform: rotateX(60deg); }
.two { transform: rotateX(100deg); } </style> <body class="ant-row"> <div class="round_warp"> <div class="round one">1</div> <div class="round two">2</div> </div> </body></html>

标签：rotateX,100%,transform,旋转,立体,width,height,border,圆环
来源： https://www.cnblogs.com/angia/p/16427083.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

立体旋转圆环