{"id":17448,"date":"2012-07-09T12:17:51","date_gmt":"2012-07-09T19:17:51","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=17448"},"modified":"2021-07-14T11:49:34","modified_gmt":"2021-07-14T18:49:34","slug":"transform-style","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform-style\/","title":{"rendered":"transform-style"},"content":{"rendered":"\n

The transform-style<\/code> property, when applied to an element, determines if that element’s children are positioned in 3D space, or flattened.<\/p>\n\n\n\n

.parent {\n  transform-style: preserve-3d;\n}<\/code><\/pre>\n\n\n\n
It accepts one of two values: flat<\/code> (the default) and preserve-3d<\/code>. To demonstrate the difference between the two values, click the toggle button in the CodePen below: