3D Card View Source



The 3D Card Component is a fluid card component used to display present any object in 3d. It is a port of the vanilla JS pen of Robin Delaporte to React. The code is used under the MIT license.



Imports



Import 3D Card Component.


0
import { Card3D } from 'slate-react-system';


Usage



Declare the 3D Card Component.

0
/* Custom styles for the container to set width and height */
1
<div css={STYLES_WRAPPER}>
2
  <Card3D>
3
    /* Any object with custom styles goes in here */
4
    <div
5
      css={STYLES_LAYER}
6
      style={{ 
7
        backgroundImage: 
8
          "url('http://robindelaporte.fr/codepen/visa-bg.jpg')" 
9
      }}
10
    />
11
    <div
12
      css={STYLES_LAYER}
13
      style={{ 
14
        backgroundImage: 
15
          "url('http://robindelaporte.fr/codepen/visa.png')" 
16
      }}
17
    />
18
  </Card3D>
19
</div>


Output





Components
Avatar GroupButtonsCard Tabs3D CardCheckboxesColorsDropdownsHover TileIconsInputsList EditorLoadersNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source