CSS 转换以在椭圆路径中旋转元素答案

【问题标题】：CSS transform to rotate an element in an oval pathCSS 转换以在椭圆路径中旋转元素
【发布时间】：2014-12-18 12:08:04
【问题描述】：

我在这里有一个 jsfiddle - http://jsfiddle.net/w23v50h5/1/

        div {
            position: absolute;
            left: 315px;
            top: 143px;
            width: 50px;
            height: 50px;
            background: red;

            -webkit-animation: myOrbit 6s linear infinite; 
               -moz-animation: myOrbit 6s linear infinite; 
                 -o-animation: myOrbit 6s linear infinite; 
                    animation: myOrbit 6s linear infinite; 

        }

        @-webkit-keyframes myOrbit {
            from { -webkit-transform: rotate(0deg) translateX(5px) translateY(120px) rotate(0deg);}
            to   { -webkit-transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg); }
        }

        @-moz-keyframes myOrbit {
            from { -moz-transform: rotate(0deg) translateX(100px) rotate(0deg); }
            to   { -moz-transform: rotate(360deg) translateX(100px) rotate(-360deg); }
        }

        @-o-keyframes myOrbit {
            from { -o-transform: rotate(0deg) translateX(100px) rotate(0deg); }
            to   { -o-transform: rotate(360deg) translateX(100px) rotate(-360deg); }
        }

        @keyframes myOrbit {
            from { transform: rotate(0deg) translateX(100px) rotate(0deg); }
            to   { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
        }

我正在使用 css trasform 来移动一个椭圆形的元素。

我希望元素移动的路径是更平坦的椭圆形。

我还喜欢缩放元素，使其在椭圆的顶部更小，在底部更大，从而给人一种椭圆轨道向后和向前的印象。

任何人都可以帮助使轨道更平坦并缩放元素。

【问题讨论】：

我发现这个类似的问题有一个工作演示。 stackoverflow.com/questions/17022491/…
如果我可以问，您在同一个句子中使用 rotate(360deg) 和 rotate(-360deg) 的原因是什么？

标签： css css-animations css-shapes css-transforms

【解决方案1】：

您可以像这样在动画中使用 % 而不是“from to”：

 0%  { -webkit-transform: rotate(0deg) translateX(5px) translateY(120px) rotate(0deg) scale(1); }
 25%  { -webkit-transform: rotate(90deg) translateX(5px) translateY(120px) rotate(-90deg) scale(.75); }
 50%  { -webkit-transform: rotate(180deg) translateX(5px) translateY(120px) rotate(-180deg) scale(.60); }
 75%  { -webkit-transform: rotate(270deg) translateX(5px) translateY(120px) rotate(-270deg) scale(.75); }
 100%  { -webkit-transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg) scale(1); }

jsfiddle 实现： http://jsfiddle.net/jutmLgud/

【讨论】：