"

From 2013.igem.org

/* Content Flip Style */ .bb-bookblock { width: 400px; height: 300px; position: relative; background: #fff; z-index: 100; }

.bb-page { width: 50%; height: 100%; left: 50%; position: absolute;

-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;

-webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; }

.bb-page > div, .bb-outer, .bb-content { position: absolute; height: 100%; top: 0; left: 0; }

.bb-content { background: #fff; }

.bb-inner { position: relative; width: 100%; height: 100%; }

.bb-overlay, .bb-outer { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; }

.bb-page > div { width: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;

-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; }

.bb-back { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); }

.bb-outer { width: 100%; overflow: hidden; z-index: 999; }

.bb-overlay, .bb-flipoverlay { background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; z-index: 1000; }

.bb-flipoverlay { background-color: rgba(0, 0, 0, 0.2); }

.bb-bookblock > div.bb-page:first-child, .bb-bookblock > div.bb-page:first-child .bb-back { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); }

.js .bb-item { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; background: #fff; }