python (12.9k questions)

javascript (9.2k questions)

reactjs (4.7k questions)

java (4.2k questions)

java (4.2k questions)

c# (3.5k questions)

c# (3.5k questions)

html (3.3k questions)

Questions - css-transforms

Basic Animation HTML and CSS

So I am just a beginner and I am just trying to figure out animations and how they work. My plan is to move the ball infinitenly in an infinite number of degrees (lets say 90) on a line. Here are a co...
test-img

Mustafa

html

css

css-animations

css-transforms

Votes: 0

Answers: 1

Latest Answer

Here is an idea using CSS variables to have a generic code. Simply adjust the angle and the offset to control the movement .ball { --angle: 0deg; --offset: 150px; background-color: hsl(0,...
test-img

Temani Afif

CSS ease in and ease out on hover with infinite rotation

I have some element that rotate on hover. How to add animation ease-in and ease-out, so when cursor goes to element, it starts to rotate smoothly, an on mouse leave, stops smoothly. .sq { heigh...
test-img

Andre

css

css-animations

css-transitions

css-transforms

Votes: 0

Answers: 1

Latest Answer

.sq { height: 50px; width: 50px; margin: 20px; transition: transform 1.6s ease-in-out; -webkit-transition: transform 1.6s ease-in-out; -moz-transition: transform 1.6s ease-...
test-img

Dev tayeb

How to translateX an element proportionally to its own width and not its parent or screen width with pure CSS

I am trying to adapt this pure CSS text scroll tutorial to my project. I found that it does not work when scrolled element width is longer than its container width. It stops scrolling too early while ...
test-img

Marek

html

css

css-transforms

Votes: 0

Answers: 2

Latest Answer

You need to use width into content rule width: fit-content; .container { width: 200px; border: 3px solid black; border-radius: 5px; overflow: hidden; white-space: nowrap; } .content { ...
test-img

Simone Rossaini

Why 'backface-visibility: hidden' does not work with text?

This is supposed to be a memory game with cards with text on them. The cards on the front should just be white (the background-image) and at the back there is a word. But since applying the backface-v...
test-img

Timi Xi

html

css

transform

css-transforms

preserve-3d

Votes: 0

Answers: 1

Latest Answer

As you say, the solution is to add preserve-3d. See it working in the snippet .memory-game { perspective: 1000px; } * { transform-style: preserve-3d; } .memory-card { position: rel...
test-img

vals

Posts

Questions

Blogs

Jobs