html - 如何在不旋转图像CSS的情况下以椭圆形式旋转图像

Question

我有一个 jfiddle here我在其中以椭圆形式旋转图像。但是，我不希望图像同时旋转。

为了纠正这个问题，我设置了具有以下属性的旋转 -webkit-keyframes mO:

0% { -webkit-transform: rotate(0deg); rotate(0deg);   }
100% { -webkit-transform: rotate(360deg); rotate(-360deg); }

因为在过去尝试获得椭圆旋转时，设置相反的旋转属性会阻止圆旋转。在这种情况下，它不起作用。还有另一种方法可以让图像在整个路径中不旋转吗？这是我为 web 设计的第一个元素。

Answer 1

.deform  {
width: 200px;
height: 200px;
-webkit-transform: scaleX(3);
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
border-radius: 50%;
}

.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;    
-webkit-transform-origin: 50% 50%;
}

.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: ccircle 10s infinite linear;    
}

.inner {
width: 50px;
height: 50px;
position: absolute;
left: 0px;
top: 0px;
background-color: red;
display: block;
-webkit-transform: scaleX(0.33);
 }

@-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}

@-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}

Check here.