CSS 3D Transforms
The CSS transform property applies a 2D or 3D transformation to an
element. This property allows you to rotate, scale, move, and skew
elements.
Mouse over the elements below to see the difference between a 2D
and a 3D transformation:
CSS 3D Transforms Functions
With the CSS transform property you can use the following 3D
transformation functions:
rotateX()
rotateY()
rotateZ()
The CSS rotateX() Function
The rotateX() function rotates an element around its X-axis at a
given degree:
#myDiv {
transform: rotateX(150deg);
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background-color: yellow;
border: 1px solid black;
}
#myDiv {
transform: rotateX(150deg);
}
</style>
</head>
<body>
<h1>The rotateX() Method</h1>
<p>The rotateX() method rotates an element around its X-axis at a
given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 150 degrees.
</div>
</body>
</html>
The CSS rotateY() Function
The rotateY() function rotates an element around its Y-axis at a
given degree:
#myDiv {
transform: rotateY(150deg);
}
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background-color: yellow;
border: 1px solid black;
}
#myDiv {
transform: rotateY(150deg);
}
</style>
</head>
<body>
<h1>The rotateY() Method</h1>
<p>The rotateY() method rotates an element around its Y-axis at a
given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 150 degrees.
</div>
</body>
</html>
The CSS rotateZ() Function
The rotateZ() function rotates an element around its Z-axis at a
given degree:
Example
#myDiv {
transform: rotateZ(90deg);
}
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background-color: yellow;
border: 1px solid black;
}
#myDiv {
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<h1>The rotateZ() Method</h1>
<p>The rotateZ() method rotates an element around its Z-axis at a
given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 90 degrees.
</div>
</body>
</html>
CSS Transform Properties
The following table lists all the 3D transform properties:
Property Description
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements
transform-style Specifies how nested elements are rendered in 3D space
perspective Specifies the perspective on how 3D elements are viewed
perspective-origin Specifies the bottom position of 3D elements
backface-visibility Defines whether or not an element should be visible when n
CSS 3D Transform Functions
Function Description
matrix3d() Defines a 3D transformation, using a 4x4 matrix of 16 value
translate3d() Defines a 3D translation
translateZ() Defines a 3D translation, using only the value for the Z-axis
scale3d() Defines a 3D scale transformation
scaleZ() Defines a 3D scale transformation by giving a value for the
rotate3d() Defines a 3D rotation
rotateX() Defines a 3D rotation along the X-axis
rotateY() Defines a 3D rotation along the Y-axis
rotateZ() Defines a 3D rotation along the Z-axis
perspective() Defines a perspective view for a 3D transformed element
CSS Transitions
CSS transitions allows you to change property values smoothly, over
a given duration.
The CSS transition Property
To create a transition effect, you must specify the CSS property you
want to add a transition to, and the duration of the transition.
The CSS transition property is a shorthand property for:
transition-property (Required)
transition-duration (Required)
transition-timing-function
transition-delay
CSS Transition Example
The following example shows a 100px * 100px <div> element. The
<div> element has specified a transition effect for the width
property, with a duration of 2 seconds:
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
}
How to Trigger the Transition
The transition is triggered when there is a change in the element's
properties. This often happens within pseudo-classes
(:hover, :active, :focus, or :checked).
So, from the code above, the transition effect will start when the
width property changes value.
Now, we add a div:hover class that specifies a new value for the
width property when a user mouses over the <div> element:
div:hover {
width: 300px;
}
when the cursor mouses out of the element, it will gradually change
back to its original style.
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition
effect:</p>
<div></div>
</body>
</html>
Change Multiple Property Values
You can change multiple properties by separating them by commas.
The following example adds a transition effect for the width, height,
and background-color properties, with a duration of 2 seconds for
the width, 4 seconds for the height, and 3 seconds for the
background-color:
Add a transition effect for the width, height, and background-color
properties:
div {
transition: width 2s, height 4s, background-color 3s;
}
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s, height 4s, background-color 3s;
}
div:hover {
width: 300px;
height: 300px;
background-color: orange;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition
effect:</p>
<div></div>
</body>
</html>
CSS Animations
CSS allows animation of HTML elements without using JavaScript!
An animation lets an element gradually change from one style to
another.
You can change as many CSS properties you want, as many times
as you want.
To use CSS animation, you must specify some keyframes for the
animation.
Keyframes hold what styles the element will have at certain times.
The animation-name property specifies a name for the animation.
The animation-duration property defines how long an animation
should take to complete. If this property is not specified, no
animation will occur, because the default value is 0s (0 seconds).
When you specify CSS styles inside the @keyframes rule, the
animation will gradually change from the current style to the new
style at certain times.
To get an animation to work, you must bind the animation to an
element.
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
}
@keyframes myAnimation {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to
its original style.</p>
</body>
</html>
It is also possible to use percent. By using percent, you can add as
many style changes as you like.
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
}
@keyframes myAnimation {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to
its original style.</p>
</body>
</html>