bookblock/css/bookblock.css

0001 .bb-bookblock {
0002         width: 400px;
0003         height: 300px;
0004         margin: 0 auto;
0005         position: relative;
0006         z-index: 100;
0007         -webkit-perspective: 1300px;
0008         perspective: 1300px;
0009         -webkit-backface-visibility: hidden;
0010         backface-visibility: hidden;
0011 }
0012
0013 .bb-page {
0014         position: absolute;
0015         -webkit-transform-style: preserve-3d;
0016         transform-style: preserve-3d;
0017         -webkit-transition-property: -webkit-transform;
0018         transition-property: transform;
0019 }
0020
0021 .bb-vertical .bb-page {
0022         width: 50%;
0023         height: 100%;
0024         left: 50%;
0025         -webkit-transform-origin: left center;
0026         transform-origin: left center;
0027 }
0028
0029 .bb-horizontal .bb-page {
0030         width: 100%;
0031         height: 50%;
0032         top: 50%;
0033         -webkit-transform-origin: center top;
0034         transform-origin: center top;
0035 }
0036
0037 .bb-page > div,
0038 .bb-outer,
0039 .bb-content,
0040 .bb-inner {
0041         position: absolute;
0042         height: 100%;
0043         width: 100%;
0044         top: 0;
0045         left: 0;
0046         -webkit-backface-visibility: hidden;
0047         backface-visibility: hidden;
0048 }
0049
0050 .bb-vertical .bb-content {
0051         width: 200%;
0052 }
0053
0054 .bb-horizontal .bb-content {
0055         height: 200%;
0056 }
0057
0058 .bb-page > div {
0059         width: 100%;
0060         -webkit-transform-style: preserve-3d;
0061         transform-style: preserve-3d;
0062 }
0063
0064 .bb-vertical .bb-back {
0065         -webkit-transform: rotateY(-180deg);
0066         transform: rotateY(-180deg);
0067 }
0068
0069 .bb-horizontal .bb-back {
0070         -webkit-transform: rotateX(-180deg);
0071         transform: rotateX(-180deg);
0072 }
0073
0074 .bb-outer {
0075         width: 100%;
0076         overflow: hidden;
0077         z-index: 999;
0078 }
0079
0080 .bb-overlay,
0081 .bb-flipoverlay {
0082         background-color: rgba(0, 0, 0, 0.7);
0083         position: absolute;
0084         top: 0px;
0085         left: 0px;
0086         width: 100%;
0087         height: 100%;
0088         opacity: 0;
0089 }
0090
0091 .bb-flipoverlay {
0092         background-color: rgba(0, 0, 0, 0.2);
0093 }
0094
0095 .bb-bookblock.bb-vertical > div.bb-page:first-child,
0096 .bb-bookblock.bb-vertical > div.bb-page:first-child .bb-back {
0097         -webkit-transform: rotateY(180deg);
0098         transform: rotateY(180deg);
0099 }
0100
0101 .bb-bookblock.bb-horizontal > div.bb-page:first-child,
0102 .bb-bookblock.bb-horizontal > div.bb-page:first-child .bb-back {
0103         -webkit-transform: rotateX(180deg);
0104         transform: rotateX(180deg);
0105 }
0106
0107 /* Content display */
0108 .bb-content {
0109         background: #fff;
0110 }
0111
0112 .bb-vertical .bb-front .bb-content {
0113         left: -100%;
0114 }
0115
0116 .bb-horizontal .bb-front .bb-content {
0117         top: -100%;
0118 }
0119
0120 /* Flipping classes */
0121 .bb-vertical .bb-flip-next,
0122 .bb-vertical .bb-flip-initial {
0123         -webkit-transform: rotateY(-180deg);
0124         transform: rotateY(-180deg);
0125 }
0126
0127 .bb-vertical .bb-flip-prev {
0128         -webkit-transform: rotateY(0deg);
0129         transform: rotateY(0deg);
0130 }
0131
0132 .bb-horizontal .bb-flip-next,
0133 .bb-horizontal .bb-flip-initial {
0134         -webkit-transform: rotateX(180deg);
0135         transform: rotateX(180deg);
0136 }
0137
0138 .bb-horizontal .bb-flip-prev {
0139         -webkit-transform: rotateX(0deg);
0140         transform: rotateX(0deg);
0141 }
0142
0143 .bb-vertical .bb-flip-next-end {
0144         -webkit-transform: rotateY(-15deg);
0145         transform: rotateY(-15deg);
0146 }
0147
0148 .bb-vertical .bb-flip-prev-end {
0149         -webkit-transform: rotateY(-165deg);
0150         transform: rotateY(-165deg);
0151 }
0152
0153 .bb-horizontal .bb-flip-next-end {
0154         -webkit-transform: rotateX(15deg);
0155         transform: rotateX(15deg);
0156 }
0157
0158 .bb-horizontal .bb-flip-prev-end {
0159         -webkit-transform: rotateX(165deg);
0160         transform: rotateX(165deg);
0161 }
0162
0163 .bb-item {
0164         width: 100%;
0165         height: 100%;
0166         position: absolute;
0167         top: 0;
0168         left: 0;
0169         display: none;
0170         background: #fff;
0171 }
0172
0173 /* No JS */
0174 .no-js .bb-bookblock,
0175 .no-js ul.bb-custom-grid li {
0176         width: auto;
0177         height: auto;
0178 }
0179
0180 .no-js .bb-item {
0181         display: block;
0182         position: relative;
0183 }