使放大鏡沿着一條橢圓形的路徑與CSS

Question

在下面的小提琴中，我想讓放大鏡順時針方向沿着橢圓的路徑（穿過黑色輪廓）。我如何操作屬性來實現這一點？

.oval{ 
 
    background:url(http://s8.postimg.org/wozw0oq9x/oval.png); 
 
    width:743px; 
 
    height:305px; 
 
    margin-top:20px; 
 
    margin-left:20px; 
 
} 
 

 
.glass { 
 
\t display:block; 
 
    background: url(http://s29.postimg.org/5i2f94m83/magnifying_glass.png); 
 
\t width:100px; 
 
\t height:83px; 
 
    left: 487px; 
 
    top: -198px; 
 
    
 
    position: relative; 
 

 
    -webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */ 
 
     -moz-animation: myOrbit 4s linear infinite; /* Firefox 5-15 */ 
 
     -o-animation: myOrbit 4s linear infinite; /* Opera 12+ */ 
 
      animation: myOrbit 4s linear infinite; /* Chrome, Firefox 16+, 
 
                 IE 10+, Safari 5 */ 
 
} 
 

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

<div class="oval"> 
 
</div> 
 

 
<div class="glass"> 
 
</div>

https://jsfiddle.net/szq4336q/2/

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:100px; 
 
\t height:83px; 
 
    position: absolute; 
 
    left: -20px; 
 
    top: 0px; 
 
    background: url(http://s29.postimg.org/5i2f94m83/magnifying_glass.png); 
 
    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)} 
 
}

<div class="deform"> 
 
<div class="rotate"> 
 
<div class="counterrotate"> 
 
<div class="inner"> 
 
</div> 
 
</div> 
 
</div> 
 
</div>