流通，但在CSS3

Question

我正在尝试使用CSS3创建类似于下面链接中的飞独角兽这样的循环示例：

http://css-tricks.com/examples/Circulate/

独角兽的例子使用了jQuery，这是有趣的，但我希望通过动画，转换或翻译或其他东西来实现它。到目前为止，我所能做的就是让我的div像螺旋桨一样旋转。我四处寻找答案，自己尝试了很多东西，但都没有效果。

帮助!

Answer 1

您可以使用3d转换来实现这一点。

Chrome的解决方案：

.container {
    -webkit-perspective: 600px;
    -webkit-perspective-origin-x: 300px;
    position: absolute;
    left: 300px;
    top: 85px;
    width: 300px;
    height: 100px;
    background-color: lightblue;
    -webkit-transform: translateZ(10px);
    -webkit-transform-style: preserve-3d;
}
.test {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 100px;
    background-color: red;
    border-radius: 50%;
     -webkit-animation: orbit 4s infinite linear; 
    -webkit-transform: rotate3d(0, 1, 0, -89deg) translateX(300px);
    z-index: -1;
}

@-webkit-keyframes orbit {
    0% {-webkit-transform: rotate3d(0, 1, 0, 0deg) translateX(200px) rotate3d(0, 1, 0, 0deg);}
  100% {-webkit-transform: rotate3d(0, 1, 0, 360deg) translateX(200px) rotate3d(0, 1, 0, -360deg);}
}

演示

将完整的演示程序移植到IE (关于隐藏在矩形后面的圆圈的部分)会有问题。

Answer 2

这是我的解决办法

Codepen工作演示

<div class="wrapper">
  <div class="circle"></div>
</div>

CSS3

.circle {
  background:grey;
  border-radius:100%;
  width:50px;
  height:50px;
  position:absolute;
  top:50%;
  left:0;
  animation: rotate 10s linear infinite;
  transform: rotate(45deg) translateX(150px) rotate(-45deg);
}

@keyframes rotate {
    from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

也许你能找到更好的解决办法，这是我的做法。希望它能帮助你更好地理解。