CSS | transform-style Property
The transform-style property is used specify the children of an element are position in 3D space or flattened with respect to the plane of the element.
Syntax:
transform-style: flat|preserve-3d|initial|inherit;
Property Values:
- flat: This value places the child elements in the same plane of the parent. It does not preserve the 3D position. It is the default value.
Example:
<!DOCTYPE html><html><head><style>.parent {margin: 20px;border: 1px dotted;height: 200px;width: 200px;background-color: green;transform: rotateX(15deg);transform-style: flat;}.child {margin: 20px;border: 1px dotted;height: 250px;width: 250px;background-color: lightgreen;transform: rotateX(45deg);}</style></head><body><h1>CSS transform-style Property</h1><p>The CSS transform-style Property is usedto set if the children of elements areposition in 3D space or flattened.</p><divclass="parent"><divclass="child"></div></div></body></html>Output:
- preserve-3d: This value enables the child elements to preserve their 3D position.
Example:
<!DOCTYPE html><html><head><style>.parent {margin: 20px;border: 1px dotted;height: 200px;width: 200px;background-color: green;transform: rotateX(15deg);transform-style: preserve-3d;}.child {margin: 20px;border: 1px dotted;height: 250px;width: 250px;background-color: lightgreen;transform: rotateX(45deg);}</style></head><body><h1>CSS transform-style Property</h1><p>The CSS transform-style Property is usedto set if the children of elements areposition in 3D space or flattened.</p><divclass="parent"><divclass="child"></div></div></body></html>Output:
- initial: This is used to set the property to its default value.
Example:
<!DOCTYPE html><html><head><style>.parent {margin: 20px;border: 1px dotted;height: 200px;width: 200px;background-color: green;transform: rotateX(15deg);transform-style: initial;}.child {margin: 20px;border: 1px dotted;height: 250px;width: 250px;background-color: lightgreen;transform: rotateX(45deg);}</style></head><body><h1>CSS transform-style Property</h1><p>The CSS transform-style Property is usedto set if the children of elements areposition in 3D space or flattened.</p><divclass="parent"><divclass="child"></div></div></body></html>Output:
- inherit: It is used to inherit the property from its parent element.
Example:
<!DOCTYPE html><html><head><style>.main {transform-style: flat;}.parent {margin: 20px;border: 1px dotted;height: 200px;width: 200px;background-color: green;transform: rotateX(15deg);transform-style: inherit;}.child {margin: 20px;border: 1px dotted;height: 250px;width: 250px;background-color: lightgreen;transform: rotateX(45deg);}</style></head><body><h1>CSS transform-style Property</h1><p>The CSS transform-style Property is usedto set if the children of elements areposition in 3D space or flattened.</p><divclass="main"><divclass="parent"><divclass="child"></div></div></div></body></html>Output:
Supported Browsers: The browser supported by CSS transform-style property are listed below:
- Chrome 36.0, 12.0 -webkit-
- Internet Explorer 11.0
- Firefox 16.0, 10.0 -moz-
- Safari 9.0, 4.0 -webkit-
- Opera 23.0, 15.0 -webkit-
Please Login to comment...