# ablocks/2.8.0/assets/build/blocks/flip-box/style.css

aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder, version 2.8.0. 1 lines.

- Page: https://pluginprobe.com/plugins/ablocks/2.8.0/code/assets/build/blocks/flip-box/style.css
- Raw: https://pluginprobe.com/plugins/ablocks/2.8.0/raw/assets/build/blocks/flip-box/style.css
- Modified: 2025-07-14T14:48:20+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ablocks/2.8.0/code/assets/build/blocks/flip-box/style.css#L10-L20`.

```css
.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}
```