On the website, create a div for the card with an id - card01 for example. Follow that with a script tag where xa_card...build is called, referencing this div. xa_card...build creates a container div within card01 called card01_container. This div has the perspective attribute. overflow:hidden is specified, it is needed for scroll and possibly other card methods. The card size (width, height) is specified on this div. Also, the onclick event is specified for click or onmouseover and onmouseout for hover. These events pass either the event card id or the front card id &n-; see below. card01_side div is created within card01_container. card01_side_div is hidden and contains the text front or back to let the code know which side of the card is showing. This would typically be done with a hidden checkbox. I thought a hidden div was easier to understand and program. card01_event div may be created within card01_container. This is card01_rotater, card01_scroller, etc. So far, it is only used for those two methods. width and height are 100%. The transformation and transition related attributes go on this div if it exists, otherwise, they go on the front div. transformation and transition related attributes: transformation-style:preserve-3d; transition:transition-property transition-duration transition-timing-function transition-delay. transition-property - transform for rotate, scroll, and slide. opacity for fade. card01_front and card01_back have width and height of 100%. position is absolute, except for scroll as both the front and back of the card scroll. opacity is specified on front for fade, otherwise it might not be transitioned. card01_front is built before card01_back for rotate and scroll only. Otherwise front is built after back because the last one built is the one showing.
When the user clicks or hovers, xa_card_event_event is called - xa_card_rotate_rotate for example. This function gets the text from the side div and switches that text between front and back. This function sets the correct transformation depending on side div value. Then this function changes the style element. style.transform for rotate, scroll, slide. style.opacity for fade.