Transformations modify elements in a two- or three-dimensional space. Elements can be scaled, rotated, translated and skewed. Refer to the topic entitled 2D and 3D transformations for more information.
| Control | Description | Options | Property |
|---|---|---|---|
| Style | Specifies how nested elements should be rendered in 3D space. | falt, preserve-3d | theme_transformations_prop.html#mcs-transform-style |
| Back Side Visibility | Determines whether or not the back side of a transformed element should be visible when facing the viewer. For example, a box built of 6 elements can have its inside faces visible or hidden. | hidden, visible | theme_transformations_prop.html#mcs-backface-visibility |
| Functions | Specifies a sequence of transformations to be applied to an element. Refer to the topic entitled 2D and 3D transformations for a list of the supported transformations. | theme_transformations_prop.html#mcs-transform | |
| Origin X | Specifies the X coordinate of the origin for the transformations applied to an element. | center, left, right, <length>, <percentage> | theme_transformations_prop.html#mcs-transform-origin-x |
| Origin Y | Specifies the Y coordinate of the origin for the transformations applied to an element. | bottom, center, top, <length>, <percentage> | theme_transformations_prop.html#mcs-transform-origin-y |
| Origin Z | Specifies the Z coordinate of the origin for the transformations applied to an element. | <length> | theme_transformations_prop.html#mcs-transform-origin-z |
Determines whether or not the back side of a transformed element should be visible when facing the viewer. For example, a box built of 6 elements can have its inside faces visible or hidden. The default value is 'visible'.
| Option | Description |
|---|---|
| hidden | The back side of the transformed element should not be visible. |
| visible | The back side of the transformed element should be visible. |
| inherit | The value of the property should be inherited from the parent element. |
Specifies a sequence of transformations to be applied to an element. The following functions are supported:
Specifies a 2D transformation in the form of a transformation matrix. Please refer to http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined for details.
Specifies a 3D transformation in the form of a 4x4 homogeneous transformation matrix.
Specifies a perspective projection matrix. The value of the parameter represents the distance of the z=0 plane from the viewer. The value is given in pixels.
Specifies a 2D rotation, i.e. rotates an element by the given angle around the origin of the element defined by the mcs-transform-origin-x and mcs-transform-origin-y properties.
Specifies a clockwise 3D rotation by the angle defined by the <angle> parameter around the direction vector described by the first three parameters
Rotates an element by the specified angle around the X axis.
Rotates an element by the specified angle around the Y axis.
Rotates an element by the specified angle around the Z axis.
Specifies a 2D scale operation, i.e. scales an element by the given scaling vector described by the two parameters. When the second parameter is not specified, then it is assumed to be the same as the first parameter.
Specifies a 3D scale operation, i.e. scales an element by the given scaling vector described by the three parameters.
Scales an element in the X direction.
Scales an element in the Y direction.
Scales an element in the Z direction.
Specifies a skew transformation along the X axis by the given angle.
Specifies a skew transformation along the Y axis by the given angle.
Moves an element by the given vector in a two-dimensional space. If the second <translation-value> argument is not specified, then the element will not be transformed in the Y direction. The value of <translation-value> must be given as a percentage or as a length.
Moves an element by the given vector in a three-dimensional space.
Moves an element in the X direction. The value of <translation-value> must be given as a percentage or as a length.
Moves an element in the Y direction. The value of <translation-value> must be given as a percentage or as a length.
Moves an element in the Z direction. The value of <translation-value> must be given as a length.
No transformation. This is the default value.
Specifies the X coordinate of the origin for the transformations applied to an element. The default value is '50%'.
| Option | Description |
|---|---|
| center | Centers the transformation origin. |
| left | Moves the transformation origin to the left of the box. |
| right | Moves the transformation origin to the right of the box. |
| <length> | Represents an offset of the transform origin from the top left corner of the box. |
| <percentage> | Represents an offset of the transform origin from the top left corner of the box. |
| inherit | The value of the property should be inherited from the parent element. |
Specifies the Y coordinate of the origin for the transformations applied to an element. The default value is '50%'.
| Option | Description |
|---|---|
| bottom | Moves the transformation origin to the bottom of the box. |
| center | Centers the transformation origin. |
| top | Moves the transformation origin to the top of the box. |
| <length> | Represents an offset of the transform origin from the top left corner of the box. |
| <percentage> | Represents an offset of the transform origin from the top left corner of the box. |
| inherit | The value of the property should be inherited from the parent element. |
Specifies the Z coordinate of the origin for the transformations applied to an element. The default value is '0'.
| Option | Description |
|---|---|
| <length> | The z coordinate of the origin for transformations applied to an element with respect to its border box. |
| inherit | The value of the property should be inherited from the parent element. |
Specifies how nested elements should be rendered in 3D space. The default value is 'flat'.
| Option | Description |
|---|---|
| flat | Indicates that all children of the element should be rendered flattened into the 2D plane of the element. |
| preserve-3d | Indicates that all children of the element should maintain their positions in 3D space. |
| inherit | The value of the property should be inherited from the parent element. |
The following example illustrates the use of the 2D transformations.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
xmlns:sel="http://www.w3.org/2004/06/diselect">
<head>
<title>2D Transform Examples</title>
<style type="text/css">
.cont {
mcs-transform: scale(0.65) translateX(-75px) translateY(-350px);
}
.title {
font-style:oblique;
font-size: 20px;
color: red;
font-weight:bold;
font-size: 20px;
padding: 10px;
}
.warning{
color: red;
padding: 4px;
}
.photo {
width: 170px;
padding: 10px 10px 20px 10px;
border: 1px solid #BFBFBF;
background-color: white;
}
.first {
mcs-transform: translate(15px,20px) rotate(9deg);
mcs-transform-origin-x: 15px;
}
.second {
mcs-transform: translate(250px,-190px) rotate(9deg);
}
.third {
mcs-transform: translate(10px,-220px) rotate(-13deg);
}
.fourth {
mcs-transform: translate(150px,-480px);
}
.fifth {
mcs-transform: translate(150px,-1000px) rotate(-15deg);
}
.sixth {
mcs-transform: translate(250px,-950px) rotate(13deg);
}
.pic object {
display: block;
}
.desc {
color: black;
}
</style>
</head>
<body>
<div>
<sel:select>
<sel:when expr="mcs:feature('mcs:style.Transforms2D')">
<div class="cont">
<div class="photo first">
<object src="images/gallery/photos/img2.mimg"/>
<p class="desc">Apple is my favorite dish.</p>
</div>
<div class="photo second">
<object src="images/gallery/photos/img0.mimg"/>
<p class="desc">From last summer hiking trip.</p>
</div>
<div class="photo third">
<object src="images/gallery/photos/img30.mimg"/>
<p class="desc">Also from the trip to Budapest.</p>
</div>
<div class="photo fourth">
<object src="images/gallery/photos/img25.mimg"/>
<p class="desc">Sunset</p>
</div>
<div class="photo fifth">
<object src="images/gallery/photos/img18.mimg"/>
<p class="desc">The incredible Fishermen's Bastion</p>
</div>
<div class="photo sixth">
<object src="images/gallery/photos/img7.mimg"/>
<p class="desc">That's my dog.</p>
</div>
</div>
</sel:when>
<sel:otherwise>
<div class="warning">2D transforms are not supported. </div>
</sel:otherwise>
</sel:select>
</div>
</body>
</html>The following example illustrates the use of the 3D transformations.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
xmlns:sel="http://www.w3.org/2004/06/diselect">
<head>
<title>3D Transform Examples</title>
<style type="text/css">
.title {
font-style:oblique;
font-size: 20px;
color: red;
font-weight:bold;
font-size: 20px;
padding: 10px;
}
.warning{
color: red;
padding: 4px;
}
.photo {
width: 50px;
height: 110px;
padding: 3px 3px 6px 3px;
border: 1px solid #BFBFBF;
background-color: white;
}
.cont {
mcs-transform: translateY(20px);
mcs-transform-style: preserve-3d;
}
.first {
mcs-transform: translate3d(10px, 40px, 30px) perspective(300) rotateY(20deg) scaleY(1.2) scaleX(1.8);
mcs-transform-style: preserve-3d;
mcs-transform-origin: left;
}
.second {
mcs-transform: translate3d(8px,-115px,30px);
}
.third {
mcs-transform: scaleY(1.2) scaleX(1.8) translate3d(70px,-60px,50px);
}
.fourth {
mcs-transform: translateX(242px) translateY(-200px) perspective(300) rotateY(-20deg) scaleY(1.2) scaleX(1.8);
mcs-transform-style: preserve-3d;
mcs-transform-origin: right;
}
.fifth {
mcs-transform: translate3d(-14px,-93px,30px);
}
.pic object {
display: block;
}
.desc {
color: black;
font-size: 10px;
}
</style>
</head>
<body>
<div>
<sel:select>
<sel:when expr="mcs:feature('mcs:style.Transforms3D')">
<div class="cont">
<div class="photo first">
<object src="images/gallery/thumbs/img0_small.mimg"/>
<p class="desc">From last summer hiking trip.</p>
<div class="photo second">
<object src="images/gallery/thumbs/img7_small.mimg"/>
<p class="desc">That's my dog.</p>
</div>
</div>
<div class="photo third">
<object src="images/gallery/thumbs/img18_small.mimg"/>
<p class="desc">The incredible Fishermen's Bastion</p>
</div>
<div class="photo fourth">
<object src="images/gallery/thumbs/img25_small.mimg"/>
<p class="desc">Sunset</p>
<div class="photo fifth">
<object src="images/gallery/thumbs/img30_small.mimg"/>
<p class="desc">Also from the trip to Budapest.</p>
</div>
</div>
</div>
</sel:when>
<sel:otherwise>
<div class="warning"> 3D transforms are not supported. </div>
</sel:otherwise>
</sel:select>
</div>
</body>
</html>