Sequences
A board with 9 tiles. A sequence of CSS transforms. If the starting point is the center tile and facing right, what would be the ending tile after executing all the transforms?
Easy
- translate(-50%)
- translate(100%, -50%)
- rotate(90deg)
- translate3d(50%, 0, 0)
- rotate(90deg)
- translate(50%, -50%)
- rotate(45deg)
- translate3d(0, 0, 0)
- rotate(0.125turn)
- translateX(50%)
(Keep the button pressed)
Congratulations!!
You solved the puzzle!
Oh-oh!!
That's not the solution. Try again!
Medium
- scale(-1, -1)
- translate3d(50%, -50%, 0)
- rotate(90deg)
- translate(50%)
- rotate(90deg)
- scale(-1, 1)
- rotate(0.5turn)
- translate3d(0, 50%, 0)
- rotate(-45deg)
- translate(70.71%)
- translateX(70.71%)
- rotate(45deg)
- translate3d(-50%, 0, 0)
- scale(1, -1)
- translateX(-50%)
(Keep the button pressed)
Congratulations!!
You solved the puzzle!
Oh-oh!!
That's not the solution. Try again!
Hard
- translate(50%)
- translate(-100%, 0)
- rotate(45deg)
- translate3d(70.71%, 0, 0)
- rotate(-90deg)
- translate(70.71%)
- rotate(45deg)
- translate3d(0, 0, 0)
- scale(-1)
- translateX(50%)
- translateY(-50%)
- scale(-1, 1)
- translate(50%, 50%)
- rotate(calc(Pi * 1rad))
- translate3d(50%, 50%, 0)
- scaleY(-1)
- translate(50%)
- scaleX(-1)
- translate(50%, 100%)
- scaleZ(1)
- rotate(90deg)
- translate(0, -50%)
- scaleZ(-1)
- rotate(3.5turn)
- translate(50%, -100%)
(Keep the button pressed)
Congratulations!!
You solved the puzzle!
Oh-oh!!
That's not the solution. Try again!