{"id":9018,"date":"2024-11-11T21:26:52","date_gmt":"2024-11-11T20:26:52","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=9018"},"modified":"2024-11-11T21:28:16","modified_gmt":"2024-11-11T20:28:16","slug":"css-3d-card","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/css-3d-card\/","title":{"rendered":"CSS 3D Card"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"215\" height=\"219\" src=\"https:\/\/solidt.eu\/site\/wp-content\/uploads\/2024\/11\/image.png\" alt=\"\" class=\"wp-image-9020\"\/><\/figure>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"css\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">* { box-sizing: border-box; }\nbody { font-family: sans-serif; }\n\n:root {\n  --card-rotate: 10deg;\n}\n\n.scene {\n  width: 200px;\n  height: 200px;\n  perspective: 400px;\n}\n\n.card {\n  width: 200px;\n  height: 200px;\n  position: relative;\n  transform-style: preserve-3d;\n  transition: transform 0.5s;\n  transform: translateZ(-1px) rotateY(var(--card-rotate));\n}\n\n.card.show-front  { --card-rotate: 0deg; }\n.card.show-back   { --card-rotate: 180deg; }\n\n.card-face {\n  position: absolute;\n  width: 200px;\n  height: 200px;\n  border: 2px solid black;\n  line-height: 200px;\n  font-size: 40px;\n  font-weight: bold;\n  color: black;\n  text-align: center;\n  border-radius:10px;\n  background-color: #abcdef\n}\n.card-front  { transform: rotateY(  0deg) translateZ(1px); }\n.card-back   { transform: rotateY(180deg) translateZ(1px); }\n<\/pre><\/div>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"html\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">&lt;div class=\"scene\">\n  &lt;div class=\"card\">\n    &lt;div class=\"card-face card-front\">front&lt;\/div>\n    &lt;div class=\"card-face card-back\">back&lt;\/div>\n  &lt;\/div>\n&lt;\/div><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-9018","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/9018","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=9018"}],"version-history":[{"count":3,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/9018\/revisions"}],"predecessor-version":[{"id":9022,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/9018\/revisions\/9022"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=9018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=9018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=9018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}