Question

我正在尝试使用CSS3创建一个类似的循环示例，如下面链接中的飞行独角兽：

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

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

帮助！

Answer 1

这是我的解决方案

<强> HTML

<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); }
}

可能你可以找到更好的解决方案，这是我的做法。希望它能帮助你更好地理解。

Answer 2

您可以使用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);}
}

demo

将完整的演示程序移植到IE（关于隐藏在矩形后面的圆圈的部分）

时会遇到问题

循环，但在CSS3中

2 个答案: