Add 3D card pattern

client/constants/Pattern.ts

@@ -3,7 +3,7 @@
  * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
  */
 
-enum Pattern {
+enum Pattern {    
     Accordion = 'Accordion',
     ArrowButtons = 'Arrow buttons',
     Avatar = 'Avatar',
@@ -88,6 +88,7 @@ enum Pattern {
     Switch = 'Switch',
     Tab = 'Tab',
     Teardrop = 'Teardrop',
+    ThreeDimensionsCard = 'Three dimensions card',
     Timeline = 'Timeline',
     TogglePasswordVisibility = 'Toggle password visibility',
     Tooltip = 'Tooltip',

client/pages/ExplorePage.tsx

@@ -141,6 +141,7 @@ const ExplorePage = () => {
                                 <CoverCard pattern={Pattern.StickyTableColumn} />
                                 <CoverCard pattern={Pattern.StickyTableHeaders} />
                                 <CoverCard pattern={Pattern.Teardrop} />
+                                <CoverCard pattern={Pattern.ThreeDimensionsCard} />
                                 <CoverCard pattern={Pattern.Timeline} />
                                 <CoverCard pattern={Pattern.TreeDiagram} />
                                 <CoverCard pattern={Pattern.TriangleButtons} />

client/patterns/card/Details.tsx

@@ -84,7 +84,7 @@ css={`
                 </BrowserFrame>
             </div>
 
-            <RelatedPatterns patterns={[Pattern.CardLayout, Pattern.StackedCards]} />
+            <RelatedPatterns patterns={[Pattern.CardLayout, Pattern.StackedCards, Pattern.ThreeDimensionsCard]} />
         </DetailsLayout>
     );
 };

client/patterns/stacked-cards/Details.tsx

@@ -103,7 +103,7 @@ css={`
                 </BrowserFrame>
             </div>
 
-            <RelatedPatterns patterns={[Pattern.Card]} />
+            <RelatedPatterns patterns={[Pattern.Card, Pattern.ThreeDimensionsCard]} />
         </DetailsLayout>
     );
 };

client/patterns/three-dimensions-card/Cover.tsx

@@ -0,0 +1,60 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '1.5rem',
+                }}
+            >
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        height: '2rem',
+                        position: 'relative',
+                        width: '100%',
+                    }
+                }>
+                    <div
+                        style={{
+                            background: 'rgba(0, 0, 0, 0.3)',
+                            height: '100%',
+                            top: '0.5rem',
+                            left: 0,
+                            position: 'absolute',
+                            transform: 'translate(-100%, 0) skewY(-45deg)',
+                            transformOrigin: 'top left',
+                            width: '0.5rem',
+                        }}
+                    />
+                    <div
+                        style={{
+                            background: 'rgba(0, 0, 0, 0.3)',
+                            bottom: 0,
+                            height: '0.5rem',                   
+                            left: 0,
+                            position: 'absolute',
+                            transform: 'translate(0, 100%) skewX(-45deg)',
+                            transformOrigin: 'top left',
+                            width: '100%',
+                        }}
+                    />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/three-dimensions-card/Details.tsx

@@ -0,0 +1,100 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import './styles.css';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout pattern={Pattern.ThreeDimensionsCard}>
+            <Helmet>
+                <meta name="description" content="Create a 3D card with CSS" />
+                <meta name="keywords" content="css 3D card" />
+            </Helmet>
+            <div className='p-8 pb-20'>
+                <BrowserFrame
+html={`
+<div class="three-dimensions-card">
+    ...
+</div>
+`}
+css={`
+:root {
+    --three-dimensions-card-left-side-width: 1rem;
+}
+
+.three-dimensions-card {
+    position: relative;
+}
+
+/* The left side */
+.three-dimensions-card::before { 
+    background: rgba(0, 0, 0, 0.3);
+    content: '';
+    
+    /* Position */
+    top: var(--three-dimensions-card-left-side-width);
+    left: 0px;
+    position: absolute;
+    transform: translate(-100%, 0) skewY(-45deg);
+    transform-origin: left top;
+
+    /* Size */
+    height: 100%;
+    width: var(--three-dimensions-card-left-side-width);
+}
+
+/* The bottom side */
+.three-dimensions-card::after {
+    background: rgba(0, 0, 0, 0.3);
+    content: '';    
+    
+    /* Position */
+    bottom: 0px;
+    left: 0px;
+    position: absolute;
+    transform: translate(0, 100%) skewX(-45deg);
+    transform-origin: left top;
+
+    /* Size */
+    height: var(--three-dimensions-card-left-side-width);
+    width: 100%;
+}
+`}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div className="three-dimensions-card">
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    height: '8rem',
+                                    width: '16rem',
+                                }}
+                            />
+                        </div>
+                    </div>
+                </BrowserFrame>
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.Card, Pattern.StackedCards]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/three-dimensions-card/styles.css

@@ -0,0 +1,46 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+:root {
+    --three-dimensions-card-left-side-width: 1rem;
+}
+
+.three-dimensions-card {
+    position: relative;
+}
+
+/* The left side */
+.three-dimensions-card::before { 
+    background: rgba(0, 0, 0, 0.3);
+    content: '';
+    
+    /* Position */
+    top: var(--three-dimensions-card-left-side-width);
+    left: 0px;
+    position: absolute;
+    transform: translate(-100%, 0) skewY(-45deg);
+    transform-origin: left top;
+
+    /* Size */
+    height: 100%;
+    width: var(--three-dimensions-card-left-side-width);
+}
+
+/* The bottom side */
+.three-dimensions-card::after {
+    background: rgba(0, 0, 0, 0.3);
+    content: '';    
+    
+    /* Position */
+    bottom: 0px;
+    left: 0px;
+    position: absolute;
+    transform: translate(0, 100%) skewX(-45deg);
+    transform-origin: left top;
+
+    /* Size */
+    height: var(--three-dimensions-card-left-side-width);
+    width: 100%;
+}

public/sitemap.xml

@@ -84,6 +84,7 @@
     <url><loc>https://csslayout.io/patterns/switch</loc></url>
     <url><loc>https://csslayout.io/patterns/tab</loc></url>
     <url><loc>https://csslayout.io/patterns/teardrop</loc></url>
+    <url><loc>https://csslayout.io/patterns/three-dimensions-card</loc></url>
     <url><loc>https://csslayout.io/patterns/timeline</loc></url>
     <url><loc>https://csslayout.io/patterns/toggle-password-visibility</loc></url>
     <url><loc>https://csslayout.io/patterns/tooltip</loc></url>