| @@ -1,81 +1 @@ | ||
| 1 | -.ablocks-block--flip-box { | |
| 2 | - perspective: 1000px; | |
| 3 | -} | |
| 4 | - | |
| 5 | -.ablocks-block--flip-box-child { | |
| 6 | - width: 100%; | |
| 7 | -} | |
| 8 | - | |
| 9 | -.ablocks-block--flip-box-child.ablocks-flipbox__front > .ablocks-block-container, | |
| 10 | -.ablocks-block--flip-box-child.ablocks-flipbox__back > .ablocks-block-container { | |
| 11 | - display: flex; | |
| 12 | - flex-direction: column; | |
| 13 | - justify-content: center; | |
| 14 | - row-gap: 10px; | |
| 15 | - padding: 20px; | |
| 16 | -} | |
| 17 | - | |
| 18 | -.ablocks-flipbox__front > .ablocks-block-container, | |
| 19 | -.ablocks-flipbox__back > .ablocks-block-container { | |
| 20 | - padding: 20px; | |
| 21 | -} | |
| 22 | - | |
| 23 | -.ablocks-flipbox--transform-top .ablocks-flipbox__back, | |
| 24 | -.ablocks-flipbox--transform-bottom .ablocks-flipbox__back { | |
| 25 | - transform: rotateX(180deg); | |
| 26 | -} | |
| 27 | - | |
| 28 | -.ablocks-flipbox--transform-right .ablocks-flipbox__back, | |
| 29 | -.ablocks-flipbox--transform-left .ablocks-flipbox__back { | |
| 30 | - transform: rotateY(180deg); | |
| 31 | -} | |
| 32 | - | |
| 33 | -/* container of flipbox__front & flipbox__back */ | |
| 34 | -.ablocks-block--flip-box > div:nth-child(1) { | |
| 35 | - display: flex; | |
| 36 | - align-items: stretch; | |
| 37 | - justify-content: stretch; | |
| 38 | - position: relative; | |
| 39 | - transform-style: preserve-3d; | |
| 40 | - transition: transform 0.6s; | |
| 41 | -} | |
| 42 | - | |
| 43 | -.ablocks-block--flip-box > div:nth-child(1) .ablocks-flipbox__front, | |
| 44 | -.ablocks-block--flip-box > div:nth-child(1) .ablocks-flipbox__back { | |
| 45 | - display: block; | |
| 46 | - width: 100%; | |
| 47 | - backface-visibility: hidden; | |
| 48 | - transform-style: preserve-3d; | |
| 49 | -} | |
| 50 | - | |
| 51 | -.ablocks-block--flip-box > div:nth-child(1) .ablocks-flipbox__front { | |
| 52 | - position: relative; | |
| 53 | -} | |
| 54 | - | |
| 55 | -/* transformation style */ | |
| 56 | -.ablocks-block--flip-box > div:nth-child(1) .ablocks-flipbox__back { | |
| 57 | - position: absolute; | |
| 58 | - transform: rotateY(-180deg); | |
| 59 | -} | |
| 60 | - | |
| 61 | -.ablocks-flipbox--transform-top > div:nth-child(1) .ablocks-flipbox__back, | |
| 62 | -.ablocks-flipbox--transform-bottom > div:nth-child(1) .ablocks-flipbox__back { | |
| 63 | - transform: rotateX(-180deg); | |
| 64 | -} | |
| 65 | - | |
| 66 | -/* flip direction on hover */ | |
| 67 | -.ablocks-block--flip-box:hover > div:nth-child(1) { | |
| 68 | - transform: rotateY(-180deg) !important; | |
| 69 | -} | |
| 70 | - | |
| 71 | -.ablocks-flipbox--transform-right:hover > div:nth-child(1) { | |
| 72 | - transform: rotateY(180deg) !important; | |
| 73 | -} | |
| 74 | - | |
| 75 | -.ablocks-flipbox--transform-top:hover > div:nth-child(1) { | |
| 76 | - transform: rotateX(180deg) !important; | |
| 77 | -} | |
| 78 | - | |
| 79 | -.ablocks-flipbox--transform-bottom:hover > div:nth-child(1) { | |
| 80 | - transform: rotateX(-180deg) !important; | |
| 81 | -} | |
| 1 | +.ablocks-block--flip-box{perspective:1000px}.ablocks-block--flip-box-child{width:100%}.ablocks-block--flip-box-child.ablocks-flipbox__back>.ablocks-block-container,.ablocks-block--flip-box-child.ablocks-flipbox__front>.ablocks-block-container{display:flex;flex-direction:column;justify-content:center;padding:20px;row-gap:10px}.ablocks-flipbox__back>.ablocks-block-container,.ablocks-flipbox__front>.ablocks-block-container{padding:20px}.ablocks-flipbox--transform-bottom .ablocks-flipbox__back,.ablocks-flipbox--transform-top .ablocks-flipbox__back{transform:rotateX(180deg)}.ablocks-flipbox--transform-left .ablocks-flipbox__back,.ablocks-flipbox--transform-right .ablocks-flipbox__back{transform:rotateY(180deg)}.ablocks-block--flip-box>div:first-child{align-items:stretch;display:flex;justify-content:stretch;position:relative;transform-style:preserve-3d;transition:transform .6s}.ablocks-block--flip-box>div:first-child .ablocks-flipbox__back,.ablocks-block--flip-box>div:first-child .ablocks-flipbox__front{backface-visibility:hidden;display:block;transform-style:preserve-3d;width:100%}.ablocks-block--flip-box>div:first-child .ablocks-flipbox__front{position:relative}.ablocks-block--flip-box>div:first-child .ablocks-flipbox__back{position:absolute;transform:rotateY(-180deg)}.ablocks-flipbox--transform-bottom>div:first-child .ablocks-flipbox__back,.ablocks-flipbox--transform-top>div:first-child .ablocks-flipbox__back{transform:rotateX(-180deg)}.ablocks-block--flip-box:hover>div:first-child{transform:rotateY(-180deg)!important}.ablocks-flipbox--transform-right:hover>div:first-child{transform:rotateY(180deg)!important}.ablocks-flipbox--transform-top:hover>div:first-child{transform:rotateX(180deg)!important}.ablocks-flipbox--transform-bottom:hover>div:first-child{transform:rotateX(-180deg)!important} | |
