.ballgrowth {
margin-top: 40%;
filter: blur(0.2rem);
transform: scale(0.1);
transition: transform 2000ms;
width: 40px;
height: 40px;
background: #b20a37;
margin-bottom: 1rem;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
}
.btn:active + .ball {
transform: scale(10);
}
Here you'll find a growing ball.
The transform property is applied to the button and the ball's div.
The scale value multiply the size of the object. The first value will strech the size horizontally, and the second vertically.
The transition property allows you to move from a state to another one and choose the timing you want.
Usetransform: scale();
.ballmove {
width: 50px;
height: 50px;
background: #b20a37;
margin-bottom: 1rem;
border-radius: 50%;
transition: bottom 1s, transform 1s ease-in-out;
}
.btn:active + .ballmove {
transform: translate(0, 300%);
}
This is the way you can move an object in the direction you want. You can add an acceleration/deceleration with the ease-in-out property.
The first value moves the object to the right (or to the left with a negative value), and the second moves it down (up with a negative value).
An object using transform will move from its original position without causing other elements to flow around it (they will remain fixed).
Use transform: translate();
.rotatesquare {
border: 1px solid turquoise;
width: 50px;
height: 50px;
background: teal;
margin-bottom: 1rem;
transition: transform 2s ease-in-out;
margin-top: 40%;
margin-left: auto;
margin-right: auto;
}
.btn:active + .rotatesquare {
transform: rotate(360deg);
}
Here you'll manage to rotate the object using the rotate() property with the deg unit for the degree of the rotation.
A positive value will rotate the element clockwise, and a negative value will rotate it in the opposite direction
You can also use rotateX(), rotateY(), or rotateZ() to rotate the object on a different axis.
Use transform: rotate();