CSS Card – 3D Cutout Card

CSS Card – 3D Cutout Card refers to a design style that uses CSS (Cascading Style Sheets) to create a three-dimensional card with a cutout effect on a webpage.

In a 3D Cutout Card, the card appears to be floating above the background, with a portion of the card cut out to reveal the background underneath. This effect is achieved using CSS transforms and perspective.

Here’s an example of CSS code that could be used to create a 3D Cutout Card:

.wrapper {
  position: relative;
  perspective: 40em;
  display: grid;
  transform-style: preserve-3d;
}

.card {
  grid-area: 1 / 1;
  height: 200px;
  width: 400px;
  transform: translateX(10px) rotateY(25deg) rotateX(10deg);
  background: rgba(249, 198, 26, 0.88);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 30px;
  color: #000;
  text-transform: uppercase;
  font-size: 60px;
  font-weight: 900;
  backface-visibility: hidden;
  box-shadow: 0 10px 30px -3px rgba(0,0,0,.1);
}

h1 {
  font-size: 60px;
  font-weight: 900;
}

.card .enclosed {
  background: #000;
  line-height: 1;
  color: rgba(249, 198, 26, 1);
  padding: 0 5px;
  display: inline-block;
  transform: translate(-1px, 1px) scale(0.75);
  transform-origin: right center;
}

.wrapper:before {
  --bw: 9px;
  grid-area: 1 / 1;
  content: '';
  backface-visibility: hidden;
  height: 100%;
  width: 100%;
  margin-top: calc(-1 * var(--bw));
  margin-left: calc(-1 * var(--bw));
  background: transparent;
  transform: translateX(-60px) rotateY(-30deg) rotateX(15deg) scale(1.03);
  pointer-events: none;
  border: var(--bw) solid #000;
  box-sizing: content-box;
}


.wrapper:hover > div,
.wrapper:hover:before {
  transform: none;
}


.wrapper > div,
.wrapper:before {
  will-change: transform;
  transition: .3s transform cubic-bezier(.25,.46,.45,1);
}



html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  background:
    linear-gradient(to bottom right, #3C4BBD 15%, transparent),
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.2) 10%, transparent 20%) center center / 15px 15px,
    linear-gradient(to bottom right, #3C4BBD, #57ADD8);
}

In this example, the card element has a fixed width and height, along with a white background color and a box-shadow effect to create a card-like appearance. The card’s content is positioned absolutely in the center of the card, with a 3D transform applied to create the appearance of depth.

A pseudo-element is used to create the cutout effect, with a transparent background color and a transform applied to rotate it 180 degrees.

The card also includes a hover effect that rotates the content element 180 degrees to reveal the cutout effect and the background underneath.

By using CSS transforms and perspective to create a 3D Cutout Card, you can add a visually engaging and interactive element to your website design.