Question

我使用CSS3将图像放在圆周上。这些图像将围绕圆周变化，如91d，120d，240d等。到目前为止，我只能弄清楚如何保持图像正面朝上：

CSS:

@keyframes rot {
  from {
    transform: rotate(0deg)
               translate(-150px)
               rotate(0deg);
  }
  to {
    transform: rotate(-180deg)
               translate(-150px) 
               rotate(180deg);
    }
 }

.smile {
width: 40px;
height: 40px;
position: absolute;
top: 110px;
left: 50%;
border-radius: 20px;
margin: -20px;
font-size: 100px;
animation: rot 5s 1 linear;
-webkit-box-shadow: 7px 7px 5px 0px rgba(30, 30, 30, 0.35);
-moz-box-shadow:    7px 7px 5px 0px rgba(30, 30, 30, 0.35);
box-shadow:         7px 7px 5px 0px rgba(30, 30, 30, 0.35);
}


 <div style='width: 220px;
  height: 220px;
  position: relative;
  border-radius: 110px;
  border: 1px solid red;
  top: 0px;
  left: 50%;'>
  <img class="smile" src='http://www.clipartbest.com/cliparts/4i9/5aX/4i95aXEiE.jpeg'/></div>

http://jsfiddle.net/ablase/655UV/2/

如果可能的话，最好使用简单的变换，如变换：旋转（170度）＆＃39;，但是当我尝试实现这一点时，图像本身会旋转而不是保持正面向上。

我认为使用动画是好的，但动画似乎不可能在最终状态下持续存在，而且我猜测一个简单的转换可能适用于更多的浏览器。

谢谢

围绕圆周正面朝上旋转图像

0 个答案: