【发布时间】：2022-01-11 18:59:39
【问题描述】：
1- 第一个代码是我添加到旋转功能的 svg 圆（我从另一个 Q 的 stackoverflow 了解动画、关键帧）。并将其塑造成 html 正文。
<html>
<body>
<svg width="100" height="100">
<defs>
<style id="style20"> #test {animation: wheel 4s infinite linear;transform-origin: center;transform-box: fill-box;} @keyframes wheel { from { transform: rotatex(360deg); } to { transform: rotatey(0deg);}}</style>
</defs>
<circle id="test" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="black" />
</svg>
</body>
</html>2- 下一个代码来自“如何创建纯 CSS 3 维球体？”主题下的另一个问题的答案。 [https://stackoverflow.com/questions/45238194/how-can-i-create-pure-css-3-dimensional-spheres][1]
.ball {
position: absolute;
top:0px;
left:0px;
width: 98vmin;
height: 98vmin;
margin: 1vmin;
transform-style: preserve-3d;
transform: rotateX(-5deg);
}
@keyframes rot{
0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); }
100% { transform: rotateY(360deg) rotateX(0deg) rotateZ(0deg); }
}
.layer {
position: absolute;
top: 0px;
left: 0px;
width: 98vmin;
height: 98vmin;
}
.moving
{
transform-style: preserve-3d;
transform-origin: 49vmin 49vmin;
animation: rot 10s linear infinite;
}
.clip
{
border-radius: 50%;
overflow:hidden;
transform: translateZ(-0vmin);
}
@keyframes highlightanim {
0.00% {left: -150.00%; top: -178.00% }
12.50% {left: -117.67%; top: -179.64% }
25.00% {left: -97.69%; top: -195.87% }
28.75% {left: -95.00%; top: -207.09% }
32.50% {left: -97.69%; top: -220.70% }
40.00% {left: -117.67%; top: -240.01% }
47.50% {left: -150.00%; top: -247.50% }
55.00% {left: -182.33%; top: -240.01% }
62.50% {left: -202.31%; top: -220.70% }
68.75% {left: -205.00%; top: -207.09% }
75.00% {left: -202.31%; top: -195.87% }
87.50% {left: -182.33%; top: -179.64% }
100.00% {left: -150.00%; top: -178.00% }
}
.shade
{
position: relative;
top: -150%;
left: -150%;
width: 400%;
height: 400%;
background: radial-gradient(at 50% 50%, white, black, grey, black, black);
animation: highlightanim 10s linear infinite;
}<div class="ball">
<div class='layer moving'>
<div class='layer gridplane laser'></div>
<div class='layer gridplane laser2'></div>
</div>
<div class='layer clip'>
<div class='shade'>
</div>
</div>
</div>3-如何将第二个代码与第一个代码放在同一个模型中（在html的主体内，分为函数和受函数影响的路径？
4- 我尝试在代码中编辑 x、y 和 z 的值，使其看起来像围绕 X 轴旋转（从页面下方到页面上方，方向与第一个代码相同），但没有任何效果.有没有办法做到这一点？
5-颜色，我尝试改变值
感谢提前
【问题讨论】：
-
我不确定我是否理解您的问题。您想要第二个 (HTML) 示例的 SVG 版本吗？
-
是第二个代码“3-d spheres”中的svg版本