DEV Community

Mustafa Hashmani
Mustafa Hashmani

Posted on

Carousel Demo

#codepen #beginners #webdev #100daysofcode

Day 3 of 100 Days Of Code

Continued to complete the components section of jonas schmedtmann's course on Udemy and built a Carousel.

For anyone confused with the translate() function :

  • top:50% will move an element 50% of the parent container’s height. We can use transform : translate(50%,-50%) to move a button 50% of it’s height upwards and 50% of it’s height leftwards (positive for up and negative for down). It will move 50% of the actual element’s height and not the parent container’s height.
  • If used in px , it will not move relative to anything , it will relative to itself
  • The translate() function can be used to move an element(picture or button)
    • The first parameter is the units on the x-axis
    • The second parameter is the units on the y-axis

For more such content , follow me on twitter and dev.to

Top comments (0)