{"id":22187,"date":"2017-04-07T13:30:27","date_gmt":"2017-04-07T18:30:27","guid":{"rendered":"https:\/\/getflywheel.com\/?p=22187"},"modified":"2023-03-15T12:50:00","modified_gmt":"2023-03-15T17:50:00","slug":"3d-designs-css3-transform-how-to","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/3d-designs-css3-transform-how-to\/","title":{"rendered":"How to Create 3D Designs With the CSS3 Transform Property"},"content":{"rendered":"\n

There are two dimensions when it comes to the CSS3 transform property, 2D and 3D. When animating, transforms are used to make an element change from one state to another. This tutorial serves as an expansion from this guide about 2D animations<\/a>. I\u2019ll provide some insight into 3D design and how you can create awesome animations by combining these basic concepts.<\/p>\n\n\n\n

3D transforms can be pretty detailed, and can get complex if there are a lot of different pieces combined, so starting with the basic building blocks is helpful. Some of these concepts will look familiar, but the \u201cz\u201d is something that will look new when working in 3D. The 3D transforms extend 2D CSS transforms to include the z-axis, allowing for 3D transformations of DOM elements.<\/p>\n\n\n\n

What is The Z-Axis?<\/h2>\n\n\n\n

There will be a lot of reference to the z-axis. It\u2019s easy to think of it as the measurement distance of something toward or away from you. If it is a positive value, it is closer to you. If it is a negative value, it is farther away from you.<\/p>\n\n\n\n

\"illustration<\/figure>\n\n\n\n

3D Transform Examples<\/h2>\n\n\n\n

The basic properties for 3D transform are translate3d<\/code>, scale3d<\/code>, rotateX<\/code>, rotateY<\/code>, rotateZ<\/code>, perspective<\/code>, and matrix3d<\/code>. More arguments are included with translate3d<\/code>, scale3d<\/code>, and matrix3d<\/code> because they take arguments for x,y, and z. The scale property takes a value for an angle and perspective also takes a single value.<\/p>\n\n\n\n

Translate<\/h3>\n\n\n\n

translateZ()<\/strong><\/p>\n\n\n\n

This defines a 3D translation by only using the z-axis value. You may remember translate x and y from 2D translate. The idea is the same with translateX()<\/code>, translateY()<\/code>, and translateZ()<\/code> because each take a length value that moves the element by the specified distance along the correct axis.<\/p>\n\n\n\n

\"3d-design-translate-z\"<\/figure>\n\n\n\n

In this example, translateZ(-20px)<\/code> would move the element 20 pixels away from the viewer.<\/p>\n\n\n\n

Here is the code snippet to create this example:<\/p>\n\n\n\n

-webkit-transform: translateZ(-20px);\n-ms-transform: translateZ(-20px);\ntransform: translateZ(-20px);<\/code><\/pre>\n\n\n\n
translate3d()<\/strong><\/p>\n\n\n\n
The translate3d()<\/code> function is used to move the position of the element in a 3D space. This transformation is created by specifying coordinates that define how much it moves in each direction.<\/p>\n\n\n\n
The function transform: translate3d(20px, -15px, 70px);<\/code> moves the image 20 pixels along the positive x-axis, 15 pixels on the negative y axis, and then 70 pixels along the positive z axis.<\/p>\n\n\n\n
\"3d-design-translate-3d\"<\/figure>\n\n\n\n
Here\u2019s an example of translate3d<\/code>:<\/p>\n\n\n\n
-webkit-transform: translate3d(20px, -15px, 70px);\n-ms-transform: translate3d(20px, -15px, 70px);\ntransform: translate3d(20px, -15px, 70px);<\/code><\/pre>\n\n\n\n
It\u2019s pretty apparent that there is some overlapping of the second square going on. It may not look as dramatic as expected, but adding the perspective property (later in this tutorial) will help.<\/p>\n\n\n\n
\"3d-design-translate-3d-perspective\"
The perspective property was added to this example.<\/figcaption><\/figure>\n\n\n\n
Rotate<\/h3>\n\n\n\n
The rotate3d()<\/code> function rotates the element in 3D space by the specified angle around the axis. This can be written as rotate(x, y, z, angle)<\/code>.<\/p>\n\n\n\n
rotateX()<\/strong><\/p>\n\n\n\n
Pixel values won\u2019t work here, it needs to be in degrees. The rotateX()<\/code> method rotates an element around its x-axis at a given degree. See how the rectangle is shorter? It is being rotated along the x-axis. This example shows the rotation at 55 degrees.<\/p>\n\n\n\n
\"3d-design-rotate-x\"<\/figure>\n\n\n\n
-ms-transform: rotateX(55deg); \/* IE 9 *\/\n-webkit-transform: rotateX(55deg); \/* Safari *\/\ntransform: rotateX(55deg);<\/code><\/pre>\n\n\n\n
rotateY()<\/strong><\/p>\n\n\n\n
The rotateY()<\/code> method rotates an element around its y-axis. Notice how the bottom rectangle isn\u2019t as wide as the top? It is rotated so it does not appear to be as wide as the rectangle above because it is being rotated by 60 degrees.<\/p>\n\n\n\n
\"3d-design-rotate-y\"<\/figure>\n\n\n\n
-ms-transform: rotateY(60deg); \/* IE 9 *\/\n-webkit-transform: rotateY(60deg); \/* Safari *\/\ntransform: rotateY(60deg);<\/code><\/pre>\n\n\n\n
rotateZ()<\/strong><\/p>\n\n\n\n
The rotateZ()<\/code> method rotates an element around its z-axis by a specified degree. In this case, the value is 120 degrees.<\/p>\n\n\n\n
\"3d-design-rotate-z\"<\/figure>\n\n\n\n
-ms-transform: rotateZ(120deg); \/* IE 9 *\/\n-webkit-transform: rotateZ(120deg); \/* Safari *\/\ntransform: rotateZ(120deg);<\/code><\/pre>\n\n\n\n
rotate3d()<\/strong><\/p>\n\n\n\n
The function rotate3d(1, -1, 1, 45deg)<\/code> rotates the image along the y-axis by the angle 45 degrees. It\u2019s important to note that you can use negative values to rotate the element in the opposite direction.<\/p>\n\n\n\n
\"3d-design-rotate-3d\"<\/figure>\n\n\n\n
Since this is more complex than the single axis specifications, rotate3d<\/code> can be broken down like this: rotate3d(x,y,z,angle)<\/code> where x=1, y=-1, z=1, and the rotation angle = 45 degrees.<\/p>\n\n\n\n
The code to style this looks like:<\/p>\n\n\n\n
-ms-transform: rotate3d(1, -1, 1, 45deg); \/* IE 9 *\/\n-webkit-transform: rotate3d(1, -1, 1, 45deg); \/* Safari *\/\ntransform: rotate3d(1, -1, 1, 45deg);<\/code><\/pre>\n\n\n\n
Testing the Basics<\/h3>\n\n\n\n
Clockwise along the x-axis by 45 degrees.<\/strong><\/p>\n\n\n\n
\"rotate-3d-clockwise-x-axis-45-deg\"<\/figure>\n\n\n\n
transform: rotate3d(1, 0, 0, 45deg);<\/code><\/pre>\n\n\n\n
Clockwise along the y-axis by 45 degrees.<\/strong><\/p>\n\n\n\n
\"rotate-clockwise-along-y-axis-45-deg\"<\/figure>\n\n\n\n
transform: rotate3d(0, 1, 0, 45deg);<\/code><\/pre>\n\n\n\n
Clockwise along the z-axis by 45 degrees.<\/strong><\/p>\n\n\n\n
\"3d-design-clockwise-z-axis-45-deg\"<\/figure>\n\n\n\n
transform: rotate3d(0, 0, 1, 45deg);<\/code><\/pre>\n\n\n\n
It\u2019s worth mentioning that depending on the specified values, sometimes a rotation will not be noticeable; for example, this would not be noticeable: transform: rotate3d(0, 0, 0, 50deg);<\/code><\/p>\n\n\n\n
Perspective<\/h3>\n\n\n\n
This is probably the most \u201cdimensional\u201d transformation. This is where you\u2019ll literally gain perspective. If you apply 3D transformations to an element without setting the perspective, the resulting effect will not appear as three-dimensional. This is something that could be added to the properties above as well.<\/p>\n\n\n\n
To activate 3D space, an element needs perspective. This can be applied in two ways: using the transform<\/code> property or the perspective<\/code> property.<\/p>\n\n\n\n
The transform<\/code> property would look like this: transform: perspective(600px);<\/code> and the perspective property would look like this: perspective: 600px;<\/code>.<\/p>\n\n\n\n
The following examples will be changing it up between the two, so be sure to look closely at the code.<\/p>\n\n\n\n
The value of perspective<\/code> determines how intense the 3D effect is. Think of a low value as being really noticable, like how it feels when you are looking at a large object. When there is a greater value, the effect is less intense.<\/p>\n\n\n\n
The position of the vanishing point can be customized as well. It\u2019s worth a mention, and a lot of experimentation, since it is relevant to CSS perspective. By default, the vanishing point for a 3D space is positioned at the center. Use the perspective-origin property to change the position of the vanishing point. It would look something like: perspective-origin: 15% 55%<\/code>.<\/p>\n\n\n\n
\"3d-design-perspective\"
The example on the left was set to about 800px. The perspective on the right side is a lot more drastic, it was set to 200px.<\/figcaption><\/figure>\n\n\n\n
Scale<\/h3>\n\n\n\n
scaleZ()<\/strong><\/p>\n\n\n\n
This defines a 3D scale transformation by giving a value for the z-axis. Because it only scales along the z-axis, other functions are needed to demonstrate the scaling effect. See how the rectangle is out toward the viewer and how it really shows perspective?<\/p>\n\n\n\n
To fully understand scale(Z), play around with the value and you\u2019ll see the perspective get \u201csharper\u201d with the larger values.<\/p>\n\n\n\n
\"3d-design-scale-z\"
The example on the left has a value of 2 and the example on the right has a value of 8.<\/figcaption><\/figure>\n\n\n\n
scale3d(x,y,z)<\/strong><\/p>\n\n\n\n
The scale3d()<\/code> function changes the size of an element and is written as scale(x, y, z)<\/code>. Like scaleZ<\/code>, it isn\u2019t apparent what the perspective fully looks like unless it is used with perspective<\/code>.<\/p>\n\n\n\n
\"3d-design-scale-3d\"<\/figure>\n\n\n\n
This example uses this:<\/p>\n\n\n\n
-ms-transform: perspective(500px) scale3d(0.8, 2, 0.2); \/* IE 9 *\/\n-webkit-transform: perspective(500px) scale3d(0.8, 2, 0.2); \/* Safari *\/\ntransform: perspective(500px) scale3d(0.8, 2, 0.2);<\/code><\/pre>\n\n\n\n
A quick note: If all three coordinates of the vector are equal, the scaling is uniform and there will be no noticeable difference.<\/p>\n\n\n\n
transform: scale3d(1, 1, 1); \/* unchanged *\/\n\ntransform: scale3d(2, 2, 2); \/* twice the original size *\/<\/code><\/pre>\n\n\n\n
Matrix3d()<\/h3>\n\n\n\n
The 2D matrix can take six values, while the 3D matrix takes 16 (a 4×4 matrix)! It would be a very long post if all the details were covered, so if you want to explore this concept more, I highly recommend this interactive matrix3d experiment<\/a> on Codepen.<\/p>\n\n\n\n
\"3d-matrix\"<\/figure>\n\n\n\n
Here is the basic outline for the matrix3d: matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)<\/code>.<\/p>\n\n\n\n
How to Create 
Animations with 3D Transformations<\/h2>\n\n\n\n
Now that the basics are covered, creating interactive animations is the next step. Using CSS3 transforms and transitions, elements change from one state to another by rotating, scaling, or adding perspective.<\/p>\n\n\n\n
If you\u2019re new to CSS animations, it is important to know that without a transition, an element being transformed would change abruptly from one state to another. To prevent this, a transition can be added so you can control the change, giving it a smoother look.<\/p>\n\n\n\n
How to Create a Card Flip<\/h3>\n\n\n\n
Who doesn\u2019t like to play cards? This example features a double sided card and you can see both sides by flipping it with a transformation. If you take a look at the body<\/code> tag, a lot of the effect comes from the perspective<\/code> property. It is set to be 500px. A lower value like 100px looks very \u201cskewed.\u201d<\/p>\n\n\n\n
Here is the starting HTML:<\/p>\n\n\n\n
&lt;div class=\"wrapper\"&gt;\ndiv class=\"side-one\"&gt;&lt;\/div&gt;\n&lt;div class=\"side-two\"&gt;&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n
The CSS is what makes it happen:<\/p>\n\n\n\n
body {\n-webkit-perspective: 500px;\nperspective: 500px;\n}\n\n.wrapper {\n-webkit-transition: all 1s ease-in;\ntransition: all 1s ease-in;\n-webkit-transform-style: preserve-3d;\ntransform-style: preserve-3d;\nposition: relative;\nmargin: 100px auto;\nwidth: 250px;\nheight: 250px;\ncursor: pointer;\n}\n\n.wrapper div {\nposition: absolute;\n-webkit-backface-visibility: hidden;\nbackface-visibility: hidden;\nwidth: 100%;\nheight: 100%;\nborder-radius: 10px;\nbackground-position: 50% 50%;\nbackground-size: 150px;\nbackground-repeat: no-repeat;\nbox-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4);\ncolor: #FFF;\ntext-align: center;\ntext-shadow: 0 1px rgba(0,0,0,.3);\n}\n\n.side-one {\nz-index: 400;\nbackground: #50c6db url(image.png);\n}\n\n.side-two {\n-webkit-transform: rotateY(-180deg);\ntransform: rotateY(-180deg);\nbackground: #ef4e65 url(image.png);\n}\n\n.wrapper:hover {\n-webkit-transform: rotateY(-1turn);\ntransform: rotateY(-1turn);\n}<\/code><\/pre>\n\n\n\n
\"3d-design-animation-one-example\"<\/figure>\n\n\n\n
This can be found on Codepen<\/a>.<\/p>\n\n\n\n
If you\u2019re new to transforms, this may look interesting to you: transform: rotate(1turn);<\/code> This unit is perfect for our card because a \u201cturn\u201d unit is exactly what it sounds like, which is one full circle.<\/p>\n\n\n\n
I\u2019ve also used some easing to make a custom way of spinning. This is accomplished with transition: all 1s ease-in;<\/code>.<\/p>\n\n\n\n
Another 3D property in the snippet is transform-style: preserve-3d;<\/code>. By including this, it allows for the element to \u201cswing\u201d in the three-dimensional space rather than stay with the parent element.<\/p>\n\n\n\n
How to Create Text With a 3D Effect<\/h3>\n\n\n\n
This example was inspired by an old movie poster. There are so many different typefaces out there that can utilize great CSS styling, so unique type effects are definitely possible. This text is using rotate3d<\/code> and transform3d<\/code> to give it a unique transformation.<\/p>\n\n\n\n
\"3d-text-effect\"<\/figure>\n\n\n\n
The HTML is pretty simple:<\/p>\n\n\n\n
&lt;div class=\"container\"&gt;\n&lt;div class=\"text-wrapper\"&gt;\n&lt;div class=\"text\"&gt;New York City&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n
Here is the basic CSS:<\/p>\n\n\n\n
.container{\n-webkit-perspective: 600;\n}\n\n.text {\ntransform: rotate3d(2, 2, .5, 22deg)translate3d(100px, 0px, 0px);\n}<\/code><\/pre>\n\n\n\n
More detailed CSS and example can be found on Codepen<\/a>.<\/p>\n\n\n\n
Hopefully CSS 3D transforms bring a new dimension to your designs. Utilizing perspective is a great way to make elements look more dimensional. Combined with transitions, there are many possibilities when creating animations.<\/p>\n","protected":false},"excerpt":{"rendered":"
There are two dimensions when it comes to the CSS3 transform property, 2D and 3D. When animating, transforms are used to make an element change from one state to another. This tutorial serves as an expansion from this guide about 2D animations. I\u2019ll provide some insight into 3D design and how you can create awesome…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":141552,"template":"","resource-topic":[1396,901],"resource-role":[1397],"resource-type":[916],"class_list":["post-22187","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nHow to Create 3D Designs With the CSS3 Transform Property<\/title>\n<meta name=\"description\" content=\"3D design is not too difficult to create thanks to CSS3. Follow this tutorial to learn the basics and add 3D effects to your site!\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create 3D Designs With the CSS3 Transform Property\" \/>\n<meta property=\"og:description\" content=\"3D design is not too difficult to create thanks to CSS3. Follow this tutorial to learn the basics and add 3D effects to your site!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/3d-designs-css3-transform-how-to\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-15T17:50:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/04\/3d-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Create 3D Designs With the CSS3 Transform Property\" \/>\n<meta name=\"twitter:description\" content=\"3D design is not too difficult to create thanks to CSS3. Follow this tutorial to learn the basics and add 3D effects to your site!\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/3d-designs-css3-transform-how-to\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/3d-designs-css3-transform-how-to\/\",\"name\":\"How to Create 3D Designs With the CSS3 Transform Property\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2017-04-07T18:30:27+00:00\",\"dateModified\":\"2023-03-15T17:50:00+00:00\",\"description\":\"3D design is not too difficult to create thanks to CSS3. Follow this tutorial to learn the basics and add 3D effects to your site!\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/3d-designs-css3-transform-how-to\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/3d-designs-css3-transform-how-to\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/3d-designs-css3-transform-how-to\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create 3D Designs With the CSS3 Transform Property\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create 3D Designs With the CSS3 Transform Property","description":"3D design is not too difficult to create thanks to CSS3. Follow this tutorial to learn the basics and add 3D effects to your site!","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Create 3D Designs With the CSS3 Transform Property","og_description":"3D design is not too difficult to create thanks to CSS3. Follow this tutorial to learn the basics and add 3D effects to your site!","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/3d-designs-css3-transform-how-to\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-03-15T17:50:00+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/04\/3d-header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"How to Create 3D Designs With the CSS3 Transform Property","twitter_description":"3D design is not too difficult to create thanks to CSS3. Follow this tutorial to learn the basics and add 3D effects to your site!","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/3d-designs-css3-transform-how-to\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/3d-designs-css3-transform-how-to\/","name":"How to Create 3D Designs With the CSS3 Transform Property","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2017-04-07T18:30:27+00:00","dateModified":"2023-03-15T17:50:00+00:00","description":"3D design is not too difficult to create thanks to CSS3. Follow this tutorial to learn the basics and add 3D effects to your site!","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/3d-designs-css3-transform-how-to\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/3d-designs-css3-transform-how-to\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/3d-designs-css3-transform-how-to\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Create 3D Designs With the CSS3 Transform Property"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/04\/3d-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer","topic":"<strong>Topics:<\/strong> Design, WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/22187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/141552"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=22187"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=22187"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=22187"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=22187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}