× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

CSS3 animation function for smooth 3D revolution?

Jun 01, 2015
<p>If you want to move you element in a 3d environement, you can use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/perspective" rel="nofollow">perspective</a> property and actual 3d rotation. </p> <p>Right now you are animating on straight lines between positions so simulating a rotation is almost imposible. I built the following example, you will need to tweak the size to fit it into your project but you should get the idea.</p> <p>Also note that I put the gradient background in a pseudo element so it appear in front of the moving object :</p> <p></p><div class="snippet"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.overlay { height: 200px; position: relative; width: 40%; margin: auto; perspective:500px; margin-top:50px; } .overlay:after{ content:''; position:absolute; top:-100px; left:-10%; width:120%; height:100%; background-image: repeating-linear-gradient(90deg, transparent, transparent 1%, rgb(255, 255, 255) 2%, rgb(255, 255, 255) 2%); } .circle { width: 100px; height: 100px; border-radius: 50%; background: #888; position: absolute; z-index: -1; left: 50%; margin-left:-50px; transform: rotateY(0deg) translateX(-100px) rotateY(0deg); display: inline-block; } .move { animation: moveAndGlow 2s infinite linear; } @keyframes moveAndGlow { to{ transform:rotateY(360deg) translateX(-100px) rotateY(-360deg); } }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="overlay"&gt; &lt;span class="circle move"&gt;&lt;/span&gt; &lt;/div&gt;</code></pre> </div> </div> <p></p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/30483361/CSS3%20animation%20function%20for%20smooth%203D%20revolution?/30484449">Stack Overflow</a>.</p>
comments powered by Disqus