Isometric Card Grid in HTML and CSS

by
Isometric Card Grid in HTML and CSS
Code Snippet:Isometric Card Grid
Author: Jon Kantner
Published: January 16, 2024
Last Updated: January 22, 2024
Downloads: 4,339
License: MIT
Edit Code online: View on CodePen
Read More
 Demo
Download (File not found!)

This HTML and CSS code snippet helps you to create an isometric perspective card grid layout. It uses CSS translate and rotate transformation to make the cards isometric. Besides this, cards come with different attractive colors and hover effect.

How to Create Isometric Card Grid in HTML and CSS

1. First of all, create the HTML structure for isometric card grid as follows:

  1. <!-- Note: No real addresses and phone numbers were used here. They all came from fakenamegenerator.com.-->
  2. <main class="main">
  3.   <div class="cards"><a class="stack" href="#">
  4.       <div class="card top">
  5.         <div class="contents">
  6.           <h2><strong>ABC</strong>Design
  7.           </h2>
  8.           <h3>Ann Thrax</h3>Project Manager<br/><br/><span>✉️</span>annthrax@example.com<br/><span>📞</span>808-293-4613<br/><br/>3801 Stratford Drive<br/>Laie, HI 96762
  9.         </div>
  10.       </div>
  11.       <div class="card mid-top">
  12.         <div class="contents">
  13.           <div class="city">Laie, HI 96762</div>
  14.         </div>
  15.       </div>
  16.       <div class="card mid-bottom">
  17.         <div class="contents">
  18.           <div class="city">Laie, HI 96762</div>
  19.         </div>
  20.       </div>
  21.       <div class="card bottom">
  22.         <div class="contents">
  23.           <div class="city">Laie, HI 96762</div>
  24.         </div>
  25.       </div>
  26.       <div class="card shadow"></div></a><a class="stack" href="#">
  27.       <div class="card top">
  28.         <div class="contents">
  29.           <h2><strong>ABC</strong>Design
  30.           </h2>
  31.           <h3>Clint Westwood</h3>Customer Support<br/><br/><span>✉️</span>clintwestwood@example.com<br/><span>📞</span>865-217-3165<br/><br/>2212 Brown Avenue<br/>Hartford, TN 37753
  32.         </div>
  33.       </div>
  34.       <div class="card mid-top">
  35.         <div class="contents">
  36.           <div class="city">Hartford, TN 37753</div>
  37.         </div>
  38.       </div>
  39.       <div class="card mid-bottom">
  40.         <div class="contents">
  41.           <div class="city">Hartford, TN 37753</div>
  42.         </div>
  43.       </div>
  44.       <div class="card bottom">
  45.         <div class="contents">
  46.           <div class="city">Hartford, TN 37753</div>
  47.         </div>
  48.       </div>
  49.       <div class="card shadow"></div></a><a class="stack" href="#">
  50.       <div class="card top">
  51.         <div class="contents">
  52.           <h2><strong>ABC</strong>Design
  53.           </h2>
  54.           <h3>Joe Schmoe</h3>Graphic Designer<br/><br/><span>✉️</span>joeschmoe@example.com<br/><span>📞</span>407-712-8549<br/><br/>469 Grand Avenue<br/>Winter Park, FL 32789
  55.         </div>
  56.       </div>
  57.       <div class="card mid-top">
  58.         <div class="contents">
  59.           <div class="city">Winter Park, FL 32789</div>
  60.         </div>
  61.       </div>
  62.       <div class="card mid-bottom">
  63.         <div class="contents">
  64.           <div class="city">Winter Park, FL 32789</div>
  65.         </div>
  66.       </div>
  67.       <div class="card bottom">
  68.         <div class="contents">
  69.           <div class="city">Winter Park, FL 32789</div>
  70.         </div>
  71.       </div>
  72.       <div class="card shadow"></div></a><a class="stack" href="#">
  73.       <div class="card top">
  74.         <div class="contents">
  75.           <h2><strong>ABC</strong>Design
  76.           </h2>
  77.           <h3>Don Joel</h3>Web Developer<br/><br/><span>✉️</span>donjoel@example.com<br/><span>📞</span>216-362-0665<br/><br/>2699 Glenwood Avenue<br/>Brook Park, OH 44142
  78.         </div>
  79.       </div>
  80.       <div class="card mid-top">
  81.         <div class="contents">
  82.           <div class="city">Brook Park, OH 44142</div>
  83.         </div>
  84.       </div>
  85.       <div class="card mid-bottom">
  86.         <div class="contents">
  87.           <div class="city">Brook Park, OH 44142</div>
  88.         </div>
  89.       </div>
  90.       <div class="card bottom">
  91.         <div class="contents">
  92.           <div class="city">Brook Park, OH 44142</div>
  93.         </div>
  94.       </div>
  95.       <div class="card shadow"></div></a><a class="stack" href="#">
  96.       <div class="card top">
  97.         <div class="contents">
  98.           <h2><strong>ABC</strong>Design
  99.           </h2>
  100.           <h3>Ann Thrax</h3>Project Manager<br/><br/><span>✉️</span>annthrax@example.com<br/><span>📞</span>808-293-4613<br/><br/>3801 Stratford Drive<br/>Laie, HI 96762
  101.         </div>
  102.       </div>
  103.       <div class="card mid-top">
  104.         <div class="contents">
  105.           <div class="city">Laie, HI 96762</div>
  106.         </div>
  107.       </div>
  108.       <div class="card mid-bottom">
  109.         <div class="contents">
  110.           <div class="city">Laie, HI 96762</div>
  111.         </div>
  112.       </div>
  113.       <div class="card bottom">
  114.         <div class="contents">
  115.           <div class="city">Laie, HI 96762</div>
  116.         </div>
  117.       </div>
  118.       <div class="card shadow"></div></a><a class="stack" href="#">
  119.       <div class="card top">
  120.         <div class="contents">
  121.           <h2><strong>ABC</strong>Design
  122.           </h2>
  123.           <h3>Clint Westwood</h3>Customer Support<br/><br/><span>✉️</span>clintwestwood@example.com<br/><span>📞</span>865-217-3165<br/><br/>2212 Brown Avenue<br/>Hartford, TN 37753
  124.         </div>
  125.       </div>
  126.       <div class="card mid-top">
  127.         <div class="contents">
  128.           <div class="city">Hartford, TN 37753</div>
  129.         </div>
  130.       </div>
  131.       <div class="card mid-bottom">
  132.         <div class="contents">
  133.           <div class="city">Hartford, TN 37753</div>
  134.         </div>
  135.       </div>
  136.       <div class="card bottom">
  137.         <div class="contents">
  138.           <div class="city">Hartford, TN 37753</div>
  139.         </div>
  140.       </div>
  141.       <div class="card shadow"></div></a><a class="stack" href="#">
  142.       <div class="card top">
  143.         <div class="contents">
  144.           <h2><strong>ABC</strong>Design
  145.           </h2>
  146.           <h3>Joe Schmoe</h3>Graphic Designer<br/><br/><span>✉️</span>joeschmoe@example.com<br/><span>📞</span>407-712-8549<br/><br/>469 Grand Avenue<br/>Winter Park, FL 32789
  147.         </div>
  148.       </div>
  149.       <div class="card mid-top">
  150.         <div class="contents">
  151.           <div class="city">Winter Park, FL 32789</div>
  152.         </div>
  153.       </div>
  154.       <div class="card mid-bottom">
  155.         <div class="contents">
  156.           <div class="city">Winter Park, FL 32789</div>
  157.         </div>
  158.       </div>
  159.       <div class="card bottom">
  160.         <div class="contents">
  161.           <div class="city">Winter Park, FL 32789</div>
  162.         </div>
  163.       </div>
  164.       <div class="card shadow"></div></a><a class="stack" href="#">
  165.       <div class="card top">
  166.         <div class="contents">
  167.           <h2><strong>ABC</strong>Design
  168.           </h2>
  169.           <h3>Don Joel</h3>Web Developer<br/><br/><span>✉️</span>donjoel@example.com<br/><span>📞</span>216-362-0665<br/><br/>2699 Glenwood Avenue<br/>Brook Park, OH 44142
  170.         </div>
  171.       </div>
  172.       <div class="card mid-top">
  173.         <div class="contents">
  174.           <div class="city">Brook Park, OH 44142</div>
  175.         </div>
  176.       </div>
  177.       <div class="card mid-bottom">
  178.         <div class="contents">
  179.           <div class="city">Brook Park, OH 44142</div>
  180.         </div>
  181.       </div>
  182.       <div class="card bottom">
  183.         <div class="contents">
  184.           <div class="city">Brook Park, OH 44142</div>
  185.         </div>
  186.       </div>
  187.       <div class="card shadow"></div></a><a class="stack" href="#">
  188.       <div class="card top">
  189.         <div class="contents">
  190.           <h2><strong>ABC</strong>Design
  191.           </h2>
  192.           <h3>Ann Thrax</h3>Project Manager<br/><br/><span>✉️</span>annthrax@example.com<br/><span>📞</span>808-293-4613<br/><br/>3801 Stratford Drive<br/>Laie, HI 96762
  193.         </div>
  194.       </div>
  195.       <div class="card mid-top">
  196.         <div class="contents">
  197.           <div class="city">Laie, HI 96762</div>
  198.         </div>
  199.       </div>
  200.       <div class="card mid-bottom">
  201.         <div class="contents">
  202.           <div class="city">Laie, HI 96762</div>
  203.         </div>
  204.       </div>
  205.       <div class="card bottom">
  206.         <div class="contents">
  207.           <div class="city">Laie, HI 96762</div>
  208.         </div>
  209.       </div>
  210.       <div class="card shadow"></div></a><a class="stack" href="#">
  211.       <div class="card top">
  212.         <div class="contents">
  213.           <h2><strong>ABC</strong>Design
  214.           </h2>
  215.           <h3>Clint Westwood</h3>Customer Support<br/><br/><span>✉️</span>clintwestwood@example.com<br/><span>📞</span>865-217-3165<br/><br/>2212 Brown Avenue<br/>Hartford, TN 37753
  216.         </div>
  217.       </div>
  218.       <div class="card mid-top">
  219.         <div class="contents">
  220.           <div class="city">Hartford, TN 37753</div>
  221.         </div>
  222.       </div>
  223.       <div class="card mid-bottom">
  224.         <div class="contents">
  225.           <div class="city">Hartford, TN 37753</div>
  226.         </div>
  227.       </div>
  228.       <div class="card bottom">
  229.         <div class="contents">
  230.           <div class="city">Hartford, TN 37753</div>
  231.         </div>
  232.       </div>
  233.       <div class="card shadow"></div></a><a class="stack" href="#">
  234.       <div class="card top">
  235.         <div class="contents">
  236.           <h2><strong>ABC</strong>Design
  237.           </h2>
  238.           <h3>Joe Schmoe</h3>Graphic Designer<br/><br/><span>✉️</span>joeschmoe@example.com<br/><span>📞</span>407-712-8549<br/><br/>469 Grand Avenue<br/>Winter Park, FL 32789
  239.         </div>
  240.       </div>
  241.       <div class="card mid-top">
  242.         <div class="contents">
  243.           <div class="city">Winter Park, FL 32789</div>
  244.         </div>
  245.       </div>
  246.       <div class="card mid-bottom">
  247.         <div class="contents">
  248.           <div class="city">Winter Park, FL 32789</div>
  249.         </div>
  250.       </div>
  251.       <div class="card bottom">
  252.         <div class="contents">
  253.           <div class="city">Winter Park, FL 32789</div>
  254.         </div>
  255.       </div>
  256.       <div class="card shadow"></div></a><a class="stack" href="#">
  257.       <div class="card top">
  258.         <div class="contents">
  259.           <h2><strong>ABC</strong>Design
  260.           </h2>
  261.           <h3>Don Joel</h3>Web Developer<br/><br/><span>✉️</span>donjoel@example.com<br/><span>📞</span>216-362-0665<br/><br/>2699 Glenwood Avenue<br/>Brook Park, OH 44142
  262.         </div>
  263.       </div>
  264.       <div class="card mid-top">
  265.         <div class="contents">
  266.           <div class="city">Brook Park, OH 44142</div>
  267.         </div>
  268.       </div>
  269.       <div class="card mid-bottom">
  270.         <div class="contents">
  271.           <div class="city">Brook Park, OH 44142</div>
  272.         </div>
  273.       </div>
  274.       <div class="card bottom">
  275.         <div class="contents">
  276.           <div class="city">Brook Park, OH 44142</div>
  277.         </div>
  278.       </div>
  279.       <div class="card shadow"></div></a><a class="stack" href="#">
  280.       <div class="card top">
  281.         <div class="contents">
  282.           <h2><strong>ABC</strong>Design
  283.           </h2>
  284.           <h3>Ann Thrax</h3>Project Manager<br/><br/><span>✉️</span>annthrax@example.com<br/><span>📞</span>808-293-4613<br/><br/>3801 Stratford Drive<br/>Laie, HI 96762
  285.         </div>
  286.       </div>
  287.       <div class="card mid-top">
  288.         <div class="contents">
  289.           <div class="city">Laie, HI 96762</div>
  290.         </div>
  291.       </div>
  292.       <div class="card mid-bottom">
  293.         <div class="contents">
  294.           <div class="city">Laie, HI 96762</div>
  295.         </div>
  296.       </div>
  297.       <div class="card bottom">
  298.         <div class="contents">
  299.           <div class="city">Laie, HI 96762</div>
  300.         </div>
  301.       </div>
  302.       <div class="card shadow"></div></a><a class="stack" href="#">
  303.       <div class="card top">
  304.         <div class="contents">
  305.           <h2><strong>ABC</strong>Design
  306.           </h2>
  307.           <h3>Clint Westwood</h3>Customer Support<br/><br/><span>✉️</span>clintwestwood@example.com<br/><span>📞</span>865-217-3165<br/><br/>2212 Brown Avenue<br/>Hartford, TN 37753
  308.         </div>
  309.       </div>
  310.       <div class="card mid-top">
  311.         <div class="contents">
  312.           <div class="city">Hartford, TN 37753</div>
  313.         </div>
  314.       </div>
  315.       <div class="card mid-bottom">
  316.         <div class="contents">
  317.           <div class="city">Hartford, TN 37753</div>
  318.         </div>
  319.       </div>
  320.       <div class="card bottom">
  321.         <div class="contents">
  322.           <div class="city">Hartford, TN 37753</div>
  323.         </div>
  324.       </div>
  325.       <div class="card shadow"></div></a><a class="stack" href="#">
  326.       <div class="card top">
  327.         <div class="contents">
  328.           <h2><strong>ABC</strong>Design
  329.           </h2>
  330.           <h3>Joe Schmoe</h3>Graphic Designer<br/><br/><span>✉️</span>joeschmoe@example.com<br/><span>📞</span>407-712-8549<br/><br/>469 Grand Avenue<br/>Winter Park, FL 32789
  331.         </div>
  332.       </div>
  333.       <div class="card mid-top">
  334.         <div class="contents">
  335.           <div class="city">Winter Park, FL 32789</div>
  336.         </div>
  337.       </div>
  338.       <div class="card mid-bottom">
  339.         <div class="contents">
  340.           <div class="city">Winter Park, FL 32789</div>
  341.         </div>
  342.       </div>
  343.       <div class="card bottom">
  344.         <div class="contents">
  345.           <div class="city">Winter Park, FL 32789</div>
  346.         </div>
  347.       </div>
  348.       <div class="card shadow"></div></a><a class="stack" href="#">
  349.       <div class="card top">
  350.         <div class="contents">
  351.           <h2><strong>ABC</strong>Design
  352.           </h2>
  353.           <h3>Don Joel</h3>Web Developer<br/><br/><span>✉️</span>donjoel@example.com<br/><span>📞</span>216-362-0665<br/><br/>2699 Glenwood Avenue<br/>Brook Park, OH 44142
  354.         </div>
  355.       </div>
  356.       <div class="card mid-top">
  357.         <div class="contents">
  358.           <div class="city">Brook Park, OH 44142</div>
  359.         </div>
  360.       </div>
  361.       <div class="card mid-bottom">
  362.         <div class="contents">
  363.           <div class="city">Brook Park, OH 44142</div>
  364.         </div>
  365.       </div>
  366.       <div class="card bottom">
  367.         <div class="contents">
  368.           <div class="city">Brook Park, OH 44142</div>
  369.         </div>
  370.       </div>
  371.       <div class="card shadow"></div></a><a class="stack" href="#">
  372.       <div class="card top">
  373.         <div class="contents">
  374.           <h2><strong>ABC</strong>Design
  375.           </h2>
  376.           <h3>Ann Thrax</h3>Project Manager<br/><br/><span>✉️</span>annthrax@example.com<br/><span>📞</span>808-293-4613<br/><br/>3801 Stratford Drive<br/>Laie, HI 96762
  377.         </div>
  378.       </div>
  379.       <div class="card mid-top">
  380.         <div class="contents">
  381.           <div class="city">Laie, HI 96762</div>
  382.         </div>
  383.       </div>
  384.       <div class="card mid-bottom">
  385.         <div class="contents">
  386.           <div class="city">Laie, HI 96762</div>
  387.         </div>
  388.       </div>
  389.       <div class="card bottom">
  390.         <div class="contents">
  391.           <div class="city">Laie, HI 96762</div>
  392.         </div>
  393.       </div>
  394.       <div class="card shadow"></div></a><a class="stack" href="#">
  395.       <div class="card top">
  396.         <div class="contents">
  397.           <h2><strong>ABC</strong>Design
  398.           </h2>
  399.           <h3>Clint Westwood</h3>Customer Support<br/><br/><span>✉️</span>clintwestwood@example.com<br/><span>📞</span>865-217-3165<br/><br/>2212 Brown Avenue<br/>Hartford, TN 37753
  400.         </div>
  401.       </div>
  402.       <div class="card mid-top">
  403.         <div class="contents">
  404.           <div class="city">Hartford, TN 37753</div>
  405.         </div>
  406.       </div>
  407.       <div class="card mid-bottom">
  408.         <div class="contents">
  409.           <div class="city">Hartford, TN 37753</div>
  410.         </div>
  411.       </div>
  412.       <div class="card bottom">
  413.         <div class="contents">
  414.           <div class="city">Hartford, TN 37753</div>
  415.         </div>
  416.       </div>
  417.       <div class="card shadow"></div></a><a class="stack" href="#">
  418.       <div class="card top">
  419.         <div class="contents">
  420.           <h2><strong>ABC</strong>Design
  421.           </h2>
  422.           <h3>Joe Schmoe</h3>Graphic Designer<br/><br/><span>✉️</span>joeschmoe@example.com<br/><span>📞</span>407-712-8549<br/><br/>469 Grand Avenue<br/>Winter Park, FL 32789
  423.         </div>
  424.       </div>
  425.       <div class="card mid-top">
  426.         <div class="contents">
  427.           <div class="city">Winter Park, FL 32789</div>
  428.         </div>
  429.       </div>
  430.       <div class="card mid-bottom">
  431.         <div class="contents">
  432.           <div class="city">Winter Park, FL 32789</div>
  433.         </div>
  434.       </div>
  435.       <div class="card bottom">
  436.         <div class="contents">
  437.           <div class="city">Winter Park, FL 32789</div>
  438.         </div>
  439.       </div>
  440.       <div class="card shadow"></div></a><a class="stack" href="#">
  441.       <div class="card top">
  442.         <div class="contents">
  443.           <h2><strong>ABC</strong>Design
  444.           </h2>
  445.           <h3>Don Joel</h3>Web Developer<br/><br/><span>✉️</span>donjoel@example.com<br/><span>📞</span>216-362-0665<br/><br/>2699 Glenwood Avenue<br/>Brook Park, OH 44142
  446.         </div>
  447.       </div>
  448.       <div class="card mid-top">
  449.         <div class="contents">
  450.           <div class="city">Brook Park, OH 44142</div>
  451.         </div>
  452.       </div>
  453.       <div class="card mid-bottom">
  454.         <div class="contents">
  455.           <div class="city">Brook Park, OH 44142</div>
  456.         </div>
  457.       </div>
  458.       <div class="card bottom">
  459.         <div class="contents">
  460.           <div class="city">Brook Park, OH 44142</div>
  461.         </div>
  462.       </div>
  463.       <div class="card shadow"></div></a><a class="stack" href="#">
  464.       <div class="card top">
  465.         <div class="contents">
  466.           <h2><strong>ABC</strong>Design
  467.           </h2>
  468.           <h3>Ann Thrax</h3>Project Manager<br/><br/><span>✉️</span>annthrax@example.com<br/><span>📞</span>808-293-4613<br/><br/>3801 Stratford Drive<br/>Laie, HI 96762
  469.         </div>
  470.       </div>
  471.       <div class="card mid-top">
  472.         <div class="contents">
  473.           <div class="city">Laie, HI 96762</div>
  474.         </div>
  475.       </div>
  476.       <div class="card mid-bottom">
  477.         <div class="contents">
  478.           <div class="city">Laie, HI 96762</div>
  479.         </div>
  480.       </div>
  481.       <div class="card bottom">
  482.         <div class="contents">
  483.           <div class="city">Laie, HI 96762</div>
  484.         </div>
  485.       </div>
  486.       <div class="card shadow"></div></a><a class="stack" href="#">
  487.       <div class="card top">
  488.         <div class="contents">
  489.           <h2><strong>ABC</strong>Design
  490.           </h2>
  491.           <h3>Clint Westwood</h3>Customer Support<br/><br/><span>✉️</span>clintwestwood@example.com<br/><span>📞</span>865-217-3165<br/><br/>2212 Brown Avenue<br/>Hartford, TN 37753
  492.         </div>
  493.       </div>
  494.       <div class="card mid-top">
  495.         <div class="contents">
  496.           <div class="city">Hartford, TN 37753</div>
  497.         </div>
  498.       </div>
  499.       <div class="card mid-bottom">
  500.         <div class="contents">
  501.           <div class="city">Hartford, TN 37753</div>
  502.         </div>
  503.       </div>
  504.       <div class="card bottom">
  505.         <div class="contents">
  506.           <div class="city">Hartford, TN 37753</div>
  507.         </div>
  508.       </div>
  509.       <div class="card shadow"></div></a><a class="stack" href="#">
  510.       <div class="card top">
  511.         <div class="contents">
  512.           <h2><strong>ABC</strong>Design
  513.           </h2>
  514.           <h3>Joe Schmoe</h3>Graphic Designer<br/><br/><span>✉️</span>joeschmoe@example.com<br/><span>📞</span>407-712-8549<br/><br/>469 Grand Avenue<br/>Winter Park, FL 32789
  515.         </div>
  516.       </div>
  517.       <div class="card mid-top">
  518.         <div class="contents">
  519.           <div class="city">Winter Park, FL 32789</div>
  520.         </div>
  521.       </div>
  522.       <div class="card mid-bottom">
  523.         <div class="contents">
  524.           <div class="city">Winter Park, FL 32789</div>
  525.         </div>
  526.       </div>
  527.       <div class="card bottom">
  528.         <div class="contents">
  529.           <div class="city">Winter Park, FL 32789</div>
  530.         </div>
  531.       </div>
  532.       <div class="card shadow"></div></a><a class="stack" href="#">
  533.       <div class="card top">
  534.         <div class="contents">
  535.           <h2><strong>ABC</strong>Design
  536.           </h2>
  537.           <h3>Don Joel</h3>Web Developer<br/><br/><span>✉️</span>donjoel@example.com<br/><span>📞</span>216-362-0665<br/><br/>2699 Glenwood Avenue<br/>Brook Park, OH 44142
  538.         </div>
  539.       </div>
  540.       <div class="card mid-top">
  541.         <div class="contents">
  542.           <div class="city">Brook Park, OH 44142</div>
  543.         </div>
  544.       </div>
  545.       <div class="card mid-bottom">
  546.         <div class="contents">
  547.           <div class="city">Brook Park, OH 44142</div>
  548.         </div>
  549.       </div>
  550.       <div class="card bottom">
  551.         <div class="contents">
  552.           <div class="city">Brook Park, OH 44142</div>
  553.         </div>
  554.       </div>
  555.       <div class="card shadow"></div></a><a class="stack" href="#">
  556.       <div class="card top">
  557.         <div class="contents">
  558.           <h2><strong>ABC</strong>Design
  559.           </h2>
  560.           <h3>Ann Thrax</h3>Project Manager<br/><br/><span>✉️</span>annthrax@example.com<br/><span>📞</span>808-293-4613<br/><br/>3801 Stratford Drive<br/>Laie, HI 96762
  561.         </div>
  562.       </div>
  563.       <div class="card mid-top">
  564.         <div class="contents">
  565.           <div class="city">Laie, HI 96762</div>
  566.         </div>
  567.       </div>
  568.       <div class="card mid-bottom">
  569.         <div class="contents">
  570.           <div class="city">Laie, HI 96762</div>
  571.         </div>
  572.       </div>
  573.       <div class="card bottom">
  574.         <div class="contents">
  575.           <div class="city">Laie, HI 96762</div>
  576.         </div>
  577.       </div>
  578.       <div class="card shadow"></div></a><a class="stack" href="#">
  579.       <div class="card top">
  580.         <div class="contents">
  581.           <h2><strong>ABC</strong>Design
  582.           </h2>
  583.           <h3>Clint Westwood</h3>Customer Support<br/><br/><span>✉️</span>clintwestwood@example.com<br/><span>📞</span>865-217-3165<br/><br/>2212 Brown Avenue<br/>Hartford, TN 37753
  584.         </div>
  585.       </div>
  586.       <div class="card mid-top">
  587.         <div class="contents">
  588.           <div class="city">Hartford, TN 37753</div>
  589.         </div>
  590.       </div>
  591.       <div class="card mid-bottom">
  592.         <div class="contents">
  593.           <div class="city">Hartford, TN 37753</div>
  594.         </div>
  595.       </div>
  596.       <div class="card bottom">
  597.         <div class="contents">
  598.           <div class="city">Hartford, TN 37753</div>
  599.         </div>
  600.       </div>
  601.       <div class="card shadow"></div></a><a class="stack" href="#">
  602.       <div class="card top">
  603.         <div class="contents">
  604.           <h2><strong>ABC</strong>Design
  605.           </h2>
  606.           <h3>Joe Schmoe</h3>Graphic Designer<br/><br/><span>✉️</span>joeschmoe@example.com<br/><span>📞</span>407-712-8549<br/><br/>469 Grand Avenue<br/>Winter Park, FL 32789
  607.         </div>
  608.       </div>
  609.       <div class="card mid-top">
  610.         <div class="contents">
  611.           <div class="city">Winter Park, FL 32789</div>
  612.         </div>
  613.       </div>
  614.       <div class="card mid-bottom">
  615.         <div class="contents">
  616.           <div class="city">Winter Park, FL 32789</div>
  617.         </div>
  618.       </div>
  619.       <div class="card bottom">
  620.         <div class="contents">
  621.           <div class="city">Winter Park, FL 32789</div>
  622.         </div>
  623.       </div>
  624.       <div class="card shadow"></div></a><a class="stack" href="#">
  625.       <div class="card top">
  626.         <div class="contents">
  627.           <h2><strong>ABC</strong>Design
  628.           </h2>
  629.           <h3>Don Joel</h3>Web Developer<br/><br/><span>✉️</span>donjoel@example.com<br/><span>📞</span>216-362-0665<br/><br/>2699 Glenwood Avenue<br/>Brook Park, OH 44142
  630.         </div>
  631.       </div>
  632.       <div class="card mid-top">
  633.         <div class="contents">
  634.           <div class="city">Brook Park, OH 44142</div>
  635.         </div>
  636.       </div>
  637.       <div class="card mid-bottom">
  638.         <div class="contents">
  639.           <div class="city">Brook Park, OH 44142</div>
  640.         </div>
  641.       </div>
  642.       <div class="card bottom">
  643.         <div class="contents">
  644.           <div class="city">Brook Park, OH 44142</div>
  645.         </div>
  646.       </div>
  647.       <div class="card shadow"></div></a><a class="stack" href="#">
  648.       <div class="card top">
  649.         <div class="contents">
  650.           <h2><strong>ABC</strong>Design
  651.           </h2>
  652.           <h3>Ann Thrax</h3>Project Manager<br/><br/><span>✉️</span>annthrax@example.com<br/><span>📞</span>808-293-4613<br/><br/>3801 Stratford Drive<br/>Laie, HI 96762
  653.         </div>
  654.       </div>
  655.       <div class="card mid-top">
  656.         <div class="contents">
  657.           <div class="city">Laie, HI 96762</div>
  658.         </div>
  659.       </div>
  660.       <div class="card mid-bottom">
  661.         <div class="contents">
  662.           <div class="city">Laie, HI 96762</div>
  663.         </div>
  664.       </div>
  665.       <div class="card bottom">
  666.         <div class="contents">
  667.           <div class="city">Laie, HI 96762</div>
  668.         </div>
  669.       </div>
  670.       <div class="card shadow"></div></a><a class="stack" href="#">
  671.       <div class="card top">
  672.         <div class="contents">
  673.           <h2><strong>ABC</strong>Design
  674.           </h2>
  675.           <h3>Clint Westwood</h3>Customer Support<br/><br/><span>✉️</span>clintwestwood@example.com<br/><span>📞</span>865-217-3165<br/><br/>2212 Brown Avenue<br/>Hartford, TN 37753
  676.         </div>
  677.       </div>
  678.       <div class="card mid-top">
  679.         <div class="contents">
  680.           <div class="city">Hartford, TN 37753</div>
  681.         </div>
  682.       </div>
  683.       <div class="card mid-bottom">
  684.         <div class="contents">
  685.           <div class="city">Hartford, TN 37753</div>
  686.         </div>
  687.       </div>
  688.       <div class="card bottom">
  689.         <div class="contents">
  690.           <div class="city">Hartford, TN 37753</div>
  691.         </div>
  692.       </div>
  693.       <div class="card shadow"></div></a><a class="stack" href="#">
  694.       <div class="card top">
  695.         <div class="contents">
  696.           <h2><strong>ABC</strong>Design
  697.           </h2>
  698.           <h3>Joe Schmoe</h3>Graphic Designer<br/><br/><span>✉️</span>joeschmoe@example.com<br/><span>📞</span>407-712-8549<br/><br/>469 Grand Avenue<br/>Winter Park, FL 32789
  699.         </div>
  700.       </div>
  701.       <div class="card mid-top">
  702.         <div class="contents">
  703.           <div class="city">Winter Park, FL 32789</div>
  704.         </div>
  705.       </div>
  706.       <div class="card mid-bottom">
  707.         <div class="contents">
  708.           <div class="city">Winter Park, FL 32789</div>
  709.         </div>
  710.       </div>
  711.       <div class="card bottom">
  712.         <div class="contents">
  713.           <div class="city">Winter Park, FL 32789</div>
  714.         </div>
  715.       </div>
  716.       <div class="card shadow"></div></a><a class="stack" href="#">
  717.       <div class="card top">
  718.         <div class="contents">
  719.           <h2><strong>ABC</strong>Design
  720.           </h2>
  721.           <h3>Don Joel</h3>Web Developer<br/><br/><span>✉️</span>donjoel@example.com<br/><span>📞</span>216-362-0665<br/><br/>2699 Glenwood Avenue<br/>Brook Park, OH 44142
  722.         </div>
  723.       </div>
  724.       <div class="card mid-top">
  725.         <div class="contents">
  726.           <div class="city">Brook Park, OH 44142</div>
  727.         </div>
  728.       </div>
  729.       <div class="card mid-bottom">
  730.         <div class="contents">
  731.           <div class="city">Brook Park, OH 44142</div>
  732.         </div>
  733.       </div>
  734.       <div class="card bottom">
  735.         <div class="contents">
  736.           <div class="city">Brook Park, OH 44142</div>
  737.         </div>
  738.       </div>
  739.       <div class="card shadow"></div></a><a class="stack" href="#">
  740.       <div class="card top">
  741.         <div class="contents">
  742.           <h2><strong>ABC</strong>Design
  743.           </h2>
  744.           <h3>Ann Thrax</h3>Project Manager<br/><br/><span>✉️</span>annthrax@example.com<br/><span>📞</span>808-293-4613<br/><br/>3801 Stratford Drive<br/>Laie, HI 96762
  745.         </div>
  746.       </div>
  747.       <div class="card mid-top">
  748.         <div class="contents">
  749.           <div class="city">Laie, HI 96762</div>
  750.         </div>
  751.       </div>
  752.       <div class="card mid-bottom">
  753.         <div class="contents">
  754.           <div class="city">Laie, HI 96762</div>
  755.         </div>
  756.       </div>
  757.       <div class="card bottom">
  758.         <div class="contents">
  759.           <div class="city">Laie, HI 96762</div>
  760.         </div>
  761.       </div>
  762.       <div class="card shadow"></div></a><a class="stack" href="#">
  763.       <div class="card top">
  764.         <div class="contents">
  765.           <h2><strong>ABC</strong>Design
  766.           </h2>
  767.           <h3>Clint Westwood</h3>Customer Support<br/><br/><span>✉️</span>clintwestwood@example.com<br/><span>📞</span>865-217-3165<br/><br/>2212 Brown Avenue<br/>Hartford, TN 37753
  768.         </div>
  769.       </div>
  770.       <div class="card mid-top">
  771.         <div class="contents">
  772.           <div class="city">Hartford, TN 37753</div>
  773.         </div>
  774.       </div>
  775.       <div class="card mid-bottom">
  776.         <div class="contents">
  777.           <div class="city">Hartford, TN 37753</div>
  778.         </div>
  779.       </div>
  780.       <div class="card bottom">
  781.         <div class="contents">
  782.           <div class="city">Hartford, TN 37753</div>
  783.         </div>
  784.       </div>
  785.       <div class="card shadow"></div></a><a class="stack" href="#">
  786.       <div class="card top">
  787.         <div class="contents">
  788.           <h2><strong>ABC</strong>Design
  789.           </h2>
  790.           <h3>Joe Schmoe</h3>Graphic Designer<br/><br/><span>✉️</span>joeschmoe@example.com<br/><span>📞</span>407-712-8549<br/><br/>469 Grand Avenue<br/>Winter Park, FL 32789
  791.         </div>
  792.       </div>
  793.       <div class="card mid-top">
  794.         <div class="contents">
  795.           <div class="city">Winter Park, FL 32789</div>
  796.         </div>
  797.       </div>
  798.       <div class="card mid-bottom">
  799.         <div class="contents">
  800.           <div class="city">Winter Park, FL 32789</div>
  801.         </div>
  802.       </div>
  803.       <div class="card bottom">
  804.         <div class="contents">
  805.           <div class="city">Winter Park, FL 32789</div>
  806.         </div>
  807.       </div>
  808.       <div class="card shadow"></div></a><a class="stack" href="#">
  809.       <div class="card top">
  810.         <div class="contents">
  811.           <h2><strong>ABC</strong>Design
  812.           </h2>
  813.           <h3>Don Joel</h3>Web Developer<br/><br/><span>✉️</span>donjoel@example.com<br/><span>📞</span>216-362-0665<br/><br/>2699 Glenwood Avenue<br/>Brook Park, OH 44142
  814.         </div>
  815.       </div>
  816.       <div class="card mid-top">
  817.         <div class="contents">
  818.           <div class="city">Brook Park, OH 44142</div>
  819.         </div>
  820.       </div>
  821.       <div class="card mid-bottom">
  822.         <div class="contents">
  823.           <div class="city">Brook Park, OH 44142</div>
  824.         </div>
  825.       </div>
  826.       <div class="card bottom">
  827.         <div class="contents">
  828.           <div class="city">Brook Park, OH 44142</div>
  829.         </div>
  830.       </div>
  831.       <div class="card shadow"></div></a>
  832.   </div>
  833. </main>

2. After that, style the cards using following CSS:

  1. *, *:before, *:after {
  2. 	border: 0;
  3. 	box-sizing: border-box;
  4. 	margin: 0;
  5. 	padding: 0;
  6. }
  7. :root {
  8. 	font-size: 18px;
  9. 	--cardW: 14em;
  10. 	--cardH: 8em;
  11. 	--cardZInc: 2em;
  12. }
  13. body {
  14. 	font: 1em "Open Sans", sans-serif;
  15. 	height: 100vh;
  16. 	overflow-x: hidden;
  17. }
  18. .cd__main{
  19.    overflow: hidden;
  20. }
  21. .main {
  22. 	display: block;
  23. 	margin: auto;
  24. 	position: relative;
  25. 	height: calc(var(--cardH) * 36 - 1.5em);
  26. }
  27. /* Grid */
  28. .cards, .stack {
  29. 	transform-style: preserve-3d;
  30. }
  31. .cards {
  32. 	--scroll: 0;
  33. 	display: grid;
  34. 	grid-template: repeat(36, var(--cardH)) / var(--cardW);
  35. 	grid-gap: 1.5em;
  36. 	position: fixed;
  37. 	top: 50%;
  38. 	left: 50%;
  39. 	transform: translateX(-50%) rotateX(45deg) rotateZ(45deg) translateY(var(--scroll));
  40. 	transform-origin: 50% 0;
  41. }
  42. .stack {
  43. 	display: block;
  44. 	position: relative;
  45. }
  46. .contents {
  47. 	color: #000;
  48. 	font-size: 0.5em;
  49. 	line-height: 1.25;
  50. 	-webkit-font-smoothing: antialiased;
  51. }
  52. .stack:nth-of-type(even) .contents {
  53. 	color: #fff;
  54. }
  55. .contents h2 {
  56. 	color: #aff;
  57. 	font-size: 2em;
  58. 	font-weight: 400;
  59. 	margin-bottom: 0.25em;
  60. }
  61. .contents span {
  62. 	margin-right: 0.75em;
  63. }
  64. .city {
  65. 	margin-top: 11.75em;
  66. }
  67. /* Card backgrounds */
  68. .stack:nth-of-type(4n + 2) .card {
  69. 	background-position: 0 100%;
  70. }
  71. .stack:nth-of-type(4n + 3) .card {
  72. 	background-position: 100% 0;
  73. }
  74. .stack:nth-of-type(4n + 4) .card {
  75. 	background-position: 100% 100%;
  76. }
  77. .stack:nth-child(8n + 5) .card,
  78. .stack:nth-child(8n + 6) .card,
  79. .stack:nth-child(8n + 7) .card,
  80. .stack:nth-child(8n + 8) .card {
  81. 	filter: hue-rotate(90deg);
  82. 	-webkit-filter: hue-rotate(90deg);
  83. }
  84. .stack:nth-child(12n + 9) .card,
  85. .stack:nth-child(12n + 10) .card,
  86. .stack:nth-child(12n + 11) .card,
  87. .stack:nth-child(12n + 12) .card {
  88. 	filter: hue-rotate(180deg);
  89. 	-webkit-filter: hue-rotate(180deg);
  90. }
  91. /* Card hover */
  92. .stack:hover .top, .stack:focus .top {
  93. 	transform: translateZ(calc(var(--cardZInc)*4));
  94. }
  95. .stack:hover .mid-top, .stack:focus .mid-top {
  96. 	transform: translateZ(calc(var(--cardZInc)*3));
  97. }
  98. .stack:hover .mid-bottom, .stack:focus .mid-bottom {
  99. 	transform: translateZ(calc(var(--cardZInc)*2));
  100. }
  101. .stack:hover .bottom, .stack:focus .bottom {
  102. 	transform: translateZ(var(--cardZInc));
  103. }
  104. .stack:hover .shadow, .stack:focus .shadow {
  105. 	filter: blur(5px);
  106. 	-webkit-filter: blur(5px);
  107. 	opacity: 0.2;
  108. }
  109. /* Other card styles */
  110. .card {
  111. 	background-image: url(https://i.postimg.cc/Vspg0Nn2/business-card-backgrounds.png);
  112. 	background-size: 200% 200%;
  113. 	box-shadow: -1px -1px 0 rgba(0,0,0,0.2) inset;
  114. 	color: #000;
  115. 	padding: 0.75em;
  116. 	position: absolute;
  117. 	transition: all 0.3s;
  118. 	width: 100%;
  119. 	height: 100%;
  120. }
  121. .top {
  122. 	transform: translateZ(4px);
  123. 	z-index: 4;
  124. }
  125. .mid-top {
  126. 	transform: translateZ(3px);
  127. 	z-index: 3;
  128. }
  129. .mid-bottom {
  130. 	transform: translateZ(2px);
  131. 	z-index: 2;
  132. }
  133. .bottom {
  134. 	transform: translateZ(1px);
  135. 	z-index: 1;
  136. }
  137. .shadow {
  138. 	background: #000;
  139. 	filter: blur(2px);
  140. 	-webkit-filter: blur(2px);
  141. 	opacity: 0.4;
  142. }
  143.  
  144. /* Alter grid at breakpoints */
  145. @media screen and (min-width: 361px) {
  146. 	main {
  147. 		height: calc(var(--cardH) * 18 - 1.5em);
  148. 	}
  149. 	.cards {
  150. 		grid-template: repeat(18, var(--cardH)) / repeat(2, var(--cardW));
  151. 	}
  152. }
  153. @media screen and (min-width: 641px) {
  154. 	main {
  155. 		height: calc(var(--cardH) * 12 - 1.5em);
  156. 	}
  157. 	.cards {
  158. 		grid-template: repeat(12, var(--cardH)) / repeat(3, var(--cardW));
  159. 	}
  160. }
  161. @media screen and (min-width: 961px) {
  162. 	main {
  163. 		height: calc(var(--cardH) * 9 - 1.5em);
  164. 	}
  165. 	.cards {
  166. 		grid-template: repeat(9, var(--cardH)) / repeat(4, var(--cardW));
  167. 	}
  168. }
  169. @media screen and (min-width: 1281px) {
  170. 	main {
  171. 		height: calc(var(--cardH) * 8 - 1.5em);
  172. 	}
  173. 	.cards {
  174. 		grid-template: repeat(8, var(--cardH)) / repeat(5, var(--cardW));
  175. 	}
  176. }
  177.  
  178. /* Dark mode optimization */
  179. @media screen and (prefers-color-scheme: dark) {
  180. 	body {
  181. 		background: #3d3d3d;
  182. 	}
  183. }

3. Finally, add the following JavaScript function to control the scrolling behavior of the cards.

  1. window.addEventListener("resize",scrollGrid);
  2. window.addEventListener("scroll",scrollGrid);
  3.  
  4. function scrollGrid() {
  5. 	let bodyHeight = document.body.offsetHeight,
  6. 		mainHeight = document.querySelector("main").offsetHeight,
  7. 		cards = document.querySelector(".cards"),
  8. 		transY = (window.pageYOffset / (mainHeight - bodyHeight)) * -100;
  9. 	
  10. 	cards.style.setProperty("--scroll",transY + "%");
  11. }
  12. scrollGrid();

That’s all! hopefully, you have successfully created an isometric card grid using HTML and CSS. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X