Search code examples
csscss-transforms

Translate an element with respect to right edge of the viewport

I have a div which is initially translated out of the screen using this CSS

transform: translateX(100%);

Now, I want this div to translate back into the view port by a specific number of pixels from the right side. I have been using transform: translateX(-450px), but it translates with respect to the origin of the viewport i.e (x,y) = (0,0). What I want instead is to bring the div 450px into the viewport from the right side of the screen.
In other words, I want my origin of translate to be (x,y)=(100%,0%)
Is there anything which can be done to achieve this?

Solution

  • You could add multiple translate the transform CSS side by side.

    .box{
  transform: translateX(100%) translateX(-450px);

}