Css 将图像沿圆周右侧向上旋转

我用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>

如果可能的话，最好使用像“transform:rotate170deg”这样的简单变换，但当我尝试实现这一点时，图像本身会旋转，而不是保持正面朝上

我想使用动画是可以的，但动画似乎不可能保持其最终状态，而且我猜一个简单的转换可能在更多的浏览器中工作

---

谢谢你

我真的不明白你想做什么：我希望小笑脸图像在圆周上旋转到一定程度。笑脸图像需要保持正面朝上。我想在没有动画的情况下做到这一点。如果可能，只需一个常规的非移动变换。基本上如果我替换这个：基本上如果我替换这个：'animation:rot 3s 1 linear；'使用此选项：“变换：旋转180度”所有发生的一切都是笑脸停留在中心，倒转…说真的，我真的很想帮助你，我真的。但也许我很笨，我不知道，但我没有得到你想要的。如果你想旋转笑脸，没有比这更简单的了。也许做一些我不知道的想象…@SzymonDziewoński Dziewoński谢谢你的关心，不知怎么的，我就这样解决了。。。笑脸是颠倒的，所以我用了与大圆度数相反的方向把它翻到了右边！