CSS3:3D空间中的轨道环(带示例)

时间:2013-07-04 19:29:43

标签: css animation

我想我可能已经达到了高于我的工资等级但是......我试图在3D空间中绕圈旋转3圈(类似于原子核周围的电子 )。

Here's a few codes I've tried.

似乎我可以旋转,我可以倾斜,但是如果没有复杂的矩阵方程式,我不能同时做到这两个(我现在已经迷失了)。

这是我用来演示我想在CSS中完成的内容的一个例子

enter image description here

2 个答案:

答案 0 :(得分:2)

你正在寻找这个吗? (3d)

http://codepen.io/gcyrillus/pen/aKCuv

动画被延迟并且声明了每个变换值。

答案 1 :(得分:0)

您需要使用包装器。 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

我在问题中看过新视频。编辑了一些属性,使其看起来像视频:

new codepen