如何在不旋转图像的情况下以椭圆形式旋转图像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.

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

How to rotate image in elliptical form without rotating the image CSS

html

css

image-rotation