see axes and lens formula: /var/www/html/sand/web-dev/visualiz/3d/css-persp/steps/lens-formula-failure by default: vanishing point is relative to body: the higher the body, the lower the point. transforms: https://developer.mozilla.org/en-US/docs/Web/CSS/transform https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d good demos: vanish. point: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin https://stackoverflow.com/questions/10765755/how-to-apply-multiple-transforms-in-css more links pragmatic CSS3: https://web.archive.org/web/20140829071149/http://9elements.com/html5demos/matrix3d/ animate mdn https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions https://developer.mozilla.org/en-US/docs/Web/CSS/animation keys: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes css-tricks good thoughts: https://css-tricks.com/almanac/properties/a/animation/ a bit of info: http://webdesignerwall.com/tutorials/easy-css-animation-using-keyframes filter see links axes: ------------------> x rotation is clockwise | | | rotation is clockwise | | V y therefore: O axiz z is directed towards screen's observer z ****************************************************** tricks //in carousel: this apparently fails bs cannot point to single animation of single sprite: used by class: /* .sprite-${startCssId}:hover { -webkit-animation-play-state: paused; animation-play-state: paused; } */ //in carousel: works but corrupts animation /* anim += ` #${sId}:hover { -webkit-animation-play-state: paused; animation-play-state: paused; }`; */ ****************************************************** ****************************************************** More ****************************************************** bending book demo: ?pure CSS animation https://codepen.io/fbrz/pen/whxbF code below is possibly for this more: http://www.creativebloq.com/web-design/examples-css-912710 http://www.creativebloq.com/css3/animation-with-css3-712437 pure? CSS slider http://cssdeck.com/labs/css3-image-slider 3d: JS -> 2d -> CSS3-2d: too outdated?: http://jlongster.com/s/dom3d/ http://keithclark.co.uk/articles/creating-3d-worlds-with-html-and-css/ *************************** TODO can carous. rotate as one chunk and self-calculate all the own z-indices? can facet return back to rotating siblings to own position after pause, as pause did not exist