Transformations
Okay, first lets grap some unchanged images, a new gradient, and some rats!
A bat, ascii rats in red and green, stripes of gradients that get smaller closer to the center.
Some transforms
The bat is rotate 270 degrees, every odd (4 in total) rat is rotate by 45 degrees. A second set of gradients is layed on top of the first, rotated 45 degrees.
So, first up: they don't really behave the way I expected them to! Also using auto on a background image rarely works.
The set of gradients from the previous one is skewed this time.
Interestingly, skewing these seems to break illusion of a corridor here!
Okay, now time for some pride: bi, trans, and lesbian!
More sets of gradients that get smaller closer to the center. These are gradients of bi flag, transgender flag, the lesbian flag, and both the lesbian and transgender flag.
OH! I have an Idea! We could rotate the inner parts!
Here bars that make up the image get rotated as they get closer to the center. The amount of rotation increases with each of the sets.
Okay, now I just gotta fine tune this!
This time the sets are giving smoother image. Kinda like a whirlpool.
Next, lets play around with the anker of the transform?
Here we change the anker point of the rotations. This results in a very chaotic display.
UHH! That is kinda funky! Lets mix it up some more?
Just some variations of where I put the anker in this one. The result isn't much better.
Not a fan of these, personally! Something else maybe?
The subsets of bars starting on the top, top right, bottom, bottom left are looking much smoother. The rest of the bars in contrast are very space out.
SO two things:
- I skewed these along the y axis: Not much interesting going on!
- I also scaled them along the y axis: Which looks very weird on the diagonal linear gradients!
Applying these to some rats and emojis!
A bunch of ascii rats and purple hearts. The rats/purple hearts get smaller after each new one.
Okay, these aren't transform but using font-size and that em is relative to its parents!
In this one the rats/hearts also get rotated as they go along. Which results in a kinda stairwell look.
Since I am using ::before to place the rats/hearts, they align really weird.
Even need to give to box a size (note the border) and move the first inner dive by 50%!
Both rats and hearts are now properly contained in a box. The biggest one start at the right and they go toward the left.
Aha! Changing the pivot point of the transforms means they align properly now!
Sitll had to move them 70% to the left and 50% to the right!
That's all for now!
