Skip to content

Tag: rotation

How to make a pure-CSS animation of CLOCKWISE rotation past 359 degrees

I’m having an issue with pure CSS-based rotation using transform: rotate() coupled with transition: transform. When rotating past 360 degrees, the transition causes a counter-clockwise rotation. See code below or on CodePen. I know I can just keep increasing/decreasing the degree value (e.g. 356->360, instead for 359->0), but this is for a React app and I’d like to simply use

Memory game cards not flipping properly

The backside of my cards in my memory game are not flipping properly. At the moment when I hover over the front of any card, half of image on the back of the card appears first before the other half, as if the image was folded in half. Also the doesn’t look like it is flipping. What do I need

Three.js – Rotating a sphere around a certain axis

I have a problem. In Three.js, I want to rotate a sphere (Earth) around axis tilted by 23.5 degs. I found sphere.rotation.x, sphere.rotation.y and sphere.rotation.z, but when I combine them in the correct ratio, the sphere’s rotation is quite weird – it has no permanent rotation axis. I think I need a function like sphere.rotation.vector(1,0,-1). Does anyone know how this