CSS3の垂直タイヤでの回転アニメーションのシミュレーション

Question

私は、垂直なタイヤに回転するアニメーションを実装するアイディアと方法を考えています。

タイヤは、サイドプロファイルを持っていた場合、それが回転表示するために簡単だっただろうが、この角度で、私はスピン運動をシミュレートするかどうかはわからない：それは、このものになります。たぶん少しの垂直方向のぼかしを追加し、静的なタイヤの画像にフェードインするのでしょうか？

逆に、このショットが回転動作をシミュレートするのに十分でない可能性があります。たぶん私は実際にgifや何かが必要です。

Answer 1

私はあなたがこのリンクかもしれませ

Tire Animation 以下

<div class="tire"></div> 


.tire{ 
    width:340px; 
    height:700px; 
    background:url(http://image.prntscr.com/image/a2aa80f21c274ecbba271d4c516d33c0.png) repeat-y; 
    animation: tireanimation 1s infinite; 
    border-radius:10px; 
    position:relative; 
} 
.tire:before{ 
    content:''; 
    width:100%; 
    height:80%; 
    top:-30%; 
    left:0; 
    opacity:.7; 
    position:absolute; 
    background: rgba(255,255,255,1); 
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%); 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(66%, rgba(255,255,255,0)), color-stop(67%, rgba(255,255,255,0))); 
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%); 
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%); 
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%); 
    background: radial-gradient(ellipse at center, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1); 
} 
.tire:after{ 
    content:''; 
    width:100%; 
    height:80%; 
    bottom:-30%; 
    left:0; 
    opacity:.2; 
    position:absolute; 
    background: rgba(255,255,255,1); 
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%); 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(66%, rgba(255,255,255,0)), color-stop(67%, rgba(255,255,255,0))); 
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%); 
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%); 
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%); 
    background: radial-gradient(ellipse at center, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1); 
} 

@keyframes tireanimation { 
    0%{background-position:100% 0%} 
    100%{background-position:100% 100%} 

}