{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/beautiful-css-3-d-transform-examples/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Beautiful CSS 3D Transform Examples\",\n  \"cover\": \"/blogs/transforms/transforms.svg\",\n  \"date\": \"2020-10-05\"\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `3D transforms and perspective can be a great trick to add depth and texture to any website but they're tricky to get right.\nThey can easily look skewed, too flat or distorted if you don't use a fitting `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `perspective`), ` or go overboard on the angles.`), mdx(\"p\", null, `Still, there are sites out there that make excellent use of 3D transforms to make their pages more vibrant and visually\ninteresting. For example, here's Modulz:`), mdx(Example, {\n    link: \"https://modulz.app/styleguide\",\n    name: \"Modulz\",\n    css: p.no1,\n    code: `div {\n  transform:\n    perspective(75em)\n    rotateX(18deg);\n  box-shadow:\n    rgba(22, 31, 39, 0.42) 0px 60px 123px -25px,\n    rgba(19, 26, 32, 0.08) 0px 35px 75px -35px;\n  border-radius: 10px;\n  border: 1px solid;\n  border-color:\n    rgb(213, 220, 226)\n    rgb(213, 220, 226)\n    rgb(184, 194, 204);\n}`,\n    mdxType: \"Example\"\n  }), mdx(\"div\", {\n    style: {\n      textAlign: 'center',\n      fontSize: '20px'\n    }\n  }, mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, ` `, mdx(\"a\", _extends({\n    parentName: \"strong\"\n  }, {\n    \"href\": \"/css-3d-transform-examples/\"\n  }), `Visit the full list`), ` `))), mdx(\"p\", null, `We've been collecting these in a new resource: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/css-3d-transform-examples/\"\n  }), `Beautiful CSS 3D Transform examples`), `. We've taken\nexamples from Framer, MagicPattern, Polypane and other websites, simplified them and placed them side-by-side with their\nCSS.`), mdx(\"p\", null, `Each example comes with a Copy CSS button that lets you easily copy over the CSS that creates the 3D effect. These examples\nare great startingpoints for you to create your own beautiful CSS 3D transforms and when you do,\n`, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com\"\n  }), `reach out`), ` and we'll add them to the list!`), mdx(\"div\", {\n    style: {\n      textAlign: 'center',\n      fontSize: '20px'\n    }\n  }, mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, ` `, mdx(\"a\", _extends({\n    parentName: \"strong\"\n  }, {\n    \"href\": \"/css-3d-transform-examples/\"\n  }), `Beautiful CSS 3D Transform examples`), ` `))));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"tableOfContents":{},"excerpt":"3D transforms and perspective can be a great trick to add depth and texture to any website but they're tricky to get right.\nThey can easily look skewed, too…","frontmatter":{"title":"Beautiful CSS 3D Transform Examples","cover":"/blogs/transforms/transforms.svg","date":"2020-10-05","updated":null},"fields":{"slug":"/blog/beautiful-css-3-d-transform-examples/","date":"2020-10-04T22:00:00.000Z","ogFileName":"beautiful-css-3-d-transform-examples"}}},"pageContext":{"slug":"/blog/beautiful-css-3-d-transform-examples/"}},"staticQueryHashes":["4164364741","425175329"]}