我想我可能已经达到了高于我的工资等级的东西,但是..我试图让 3 个环在 3D 空间中环绕(类似于原子核周围的电子)。
看起来我可以旋转,我可以倾斜,但是如果没有复杂的矩阵方程,我不能同时做这两个(我现在迷路了)。
这是我制作的一个示例,用于演示我在 CSS 中要完成的工作
我想我可能已经达到了高于我的工资等级的东西,但是..我试图让 3 个环在 3D 空间中环绕(类似于原子核周围的电子)。
看起来我可以旋转,我可以倾斜,但是如果没有复杂的矩阵方程,我不能同时做这两个(我现在迷路了)。
这是我制作的一个示例,用于演示我在 CSS 中要完成的工作
您需要使用包装器。的HTML:
<!-- language: lang-html -->
<img src="http://s23.postimg.org/3zqc7rp6j/orbit_ring.png" class="rotate" />
<div class="reversed"><img src="http://s23.postimg.org/3zqc7rp6j/orbit_ring.png" class="rotate reversed" /></div>
<div class="skew-1"><img src="http://s23.postimg.org/3zqc7rp6j/orbit_ring.png" class="rotate" /></div>
和 CSS
.skew-1 {
-webkit-transform: scale(1) translateX(10px) translateY(10px) skewX(10deg) skewY(10deg);
}
.skew-2 {
transform: scale(1) translateX(-10px) translateY(-10px) skewX(-10deg) skewY(-10deg);
}
.rotate {
position:absolute;
-moz-animation: 3s rotate infinite linear ;
-moz-transform-origin: 50% 50%;
-webkit-animation: 3s rotate infinite linear ;
-webkit-transform-origin: 50% 50%;
}
@-moz-keyframes rotate {
0 { -moz-transform: rotate(0); }
100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0); }
100% { -webkit-transform: rotate(360deg); }
}
.reversed {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scale(-1.2, -1.1);
-webkit-transform-origin: 200px 200px;
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Codepen: http: //www.codepen.io/anon/pen/bEnfK
我在问题中看到了新视频。编辑了一些属性使其看起来像视频: