{"id":3877,"date":"2022-08-02T01:22:30","date_gmt":"2022-08-02T01:22:30","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3877"},"modified":"2023-06-10T11:36:05","modified_gmt":"2023-06-10T11:36:05","slug":"css-card-3d-cutout-card","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-card-3d-cutout-card\/","title":{"rendered":"CSS Card &#8211; 3D Cutout Card"},"content":{"rendered":"<p>CSS Card &#8211; 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.<\/p>\n<p>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.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"CSS Card - 3D Cutout Card\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/poOepgJ?default-tab=result&amp;theme-id=dark\" height=\"500\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/poOepgJ\"><br \/>\nCSS Card &#8211; 3D Cutout Card<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>Here&#8217;s an example of CSS code that could be used to create a 3D Cutout Card:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.wrapper {\r\n  position: relative;\r\n  perspective: 40em;\r\n  display: grid;\r\n  transform-style: preserve-3d;\r\n}\r\n\r\n.card {\r\n  grid-area: 1 \/ 1;\r\n  height: 200px;\r\n  width: 400px;\r\n  transform: translateX(10px) rotateY(25deg) rotateX(10deg);\r\n  background: rgba(249, 198, 26, 0.88);\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  padding: 30px;\r\n  color: #000;\r\n  text-transform: uppercase;\r\n  font-size: 60px;\r\n  font-weight: 900;\r\n  backface-visibility: hidden;\r\n  box-shadow: 0 10px 30px -3px rgba(0,0,0,.1);\r\n}\r\n\r\nh1 {\r\n  font-size: 60px;\r\n  font-weight: 900;\r\n}\r\n\r\n.card .enclosed {\r\n  background: #000;\r\n  line-height: 1;\r\n  color: rgba(249, 198, 26, 1);\r\n  padding: 0 5px;\r\n  display: inline-block;\r\n  transform: translate(-1px, 1px) scale(0.75);\r\n  transform-origin: right center;\r\n}\r\n\r\n.wrapper:before {\r\n  --bw: 9px;\r\n  grid-area: 1 \/ 1;\r\n  content: '';\r\n  backface-visibility: hidden;\r\n  height: 100%;\r\n  width: 100%;\r\n  margin-top: calc(-1 * var(--bw));\r\n  margin-left: calc(-1 * var(--bw));\r\n  background: transparent;\r\n  transform: translateX(-60px) rotateY(-30deg) rotateX(15deg) scale(1.03);\r\n  pointer-events: none;\r\n  border: var(--bw) solid #000;\r\n  box-sizing: content-box;\r\n}\r\n\r\n\r\n.wrapper:hover &gt; div,\r\n.wrapper:hover:before {\r\n  transform: none;\r\n}\r\n\r\n\r\n.wrapper &gt; div,\r\n.wrapper:before {\r\n  will-change: transform;\r\n  transition: .3s transform cubic-bezier(.25,.46,.45,1);\r\n}\r\n\r\n\r\n\r\nhtml,\r\nbody {\r\n  height: 100%;\r\n}\r\n\r\nbody {\r\n  display: grid;\r\n  place-items: center;\r\n  background:\r\n    linear-gradient(to bottom right, #3C4BBD 15%, transparent),\r\n    radial-gradient(circle at 100% 0%, rgba(255,255,255,.2) 10%, transparent 20%) center center \/ 15px 15px,\r\n    linear-gradient(to bottom right, #3C4BBD, #57ADD8);\r\n}<\/pre>\n<p>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&#8217;s content is positioned absolutely in the center of the card, with a 3D transform applied to create the appearance of depth.<\/p>\n<p>A pseudo-element is used to create the cutout effect, with a transparent background color and a transform applied to rotate it 180 degrees.<\/p>\n<p>The card also includes a hover effect that rotates the content element 180 degrees to reveal the cutout effect and the background underneath.<\/p>\n<p>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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Card &#8211; 3D Cutout Card refers to a design style that <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-card-3d-cutout-card\/\" title=\"CSS Card &#8211; 3D Cutout Card\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3878,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[467,461,462,103,392],"newstopic":[],"class_list":{"0":"post-3877","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"tag-3d-cutout-card","9":"tag-css-card","10":"tag-item-hover-color-background","11":"tag-web-design","12":"tag-web-design-2023"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3877","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3877"}],"version-history":[{"count":3,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3877\/revisions"}],"predecessor-version":[{"id":3881,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3877\/revisions\/3881"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3878"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3877"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3877"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3877"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}