Having set the Output Style to "Compressed", the resulting CSS stylesheets were optimized and minified, making it almost impossible to trace
the CSS back to the original SASS files.
Checking the Create a Source Map setting allowed him to help Google Chrome DevTools map the compiled CSS to the original SASS files, using
know that it is possible for CSS preprocessors too.
When I first started experimenting with modern Web APIs, 3D transforms was
still an experimental feature. Browser support was limited and shaky, and required vendor prefixes. These days
support is much better, but there are still a lot of quirks when it comes to browser implementation.
Back in 2011, I wrote a demo called CSS Page Flip, using a combination of CSS and
horizontal center of the screen, while pages on the right have their transform-origin set to their left edge. By
applying backface-visibility: hidden, I can then rotate pages along the Y axis for a simple, but nice, effect.
It took a lot of fiddling to find good values for rotateY(). Almost every new version of Webkit broke
my experiment, but I eventually settled on a combination of 0deg, -180deg and 180deg.
A couple of years later, the major browsers started supporting 3D transforms, even without vendor prefixes.
Unfortunately all of them have different ideas about how to transition from 180deg or -180deg to 0deg.
Finally I thought of forcing the browsers to do what I want by having -179.9deg and 179.9deg. This works
fine, unless for (of course) IE and Edge. IE doesn't even support 3D transforms correctly without prefix,
and for some reason Edge treats the transformation matrix differently than the other browsers, completely
breaking part of the animation.
Apart from the page flipping, the demo also has an automatic page layout mechanism that reflows the chapters
and the text blocks when needed. In the original demo, the contents of the book was actually a detailed
description of how the demo was made, but unfortunately the original content was lost at some point. Now it
is my personal story instead. Enjoy it at demo.atornblad.se/cssflip/
At some point in the future, I will make an effort to bring the solution forward into the 2016 state of
mainstream browsers, including the following:
Fix scroll wheel flipping in Firefox
Handle chapter navigation using history.pushState()
Add some interactive stuff on some of the pages
Some effort of fixing the weird behavior in Microsoft Edge
Minimal effort of making it work in Microsoft IE
When that is done, I might open-source the whole thing on GitHub.