HTML
CSS
PHP
JavaScript
SQL
Bootstrap
Solidity
jQuery
Git
Chrome DevTools
C++
PythonContents
CSS element transformations
By using the CSS transform property, you can modify the look of a 2D or 3D element (e.g., make CSS scale it or rotate it):
Example
div {
-webkit-transform: rotate(10deg); /* Safari, Chrome, Opera */
-ms-transform: rotate(10deg); /* Internet Explorer 9 */
transform: rotate(10deg);
}There are multiple transform functions you can apply to achieve different results. We will present them in the following section.
Pros Main Features
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid certificates of completion
Pros Main Features
- Easy to navigate
- No technical issues
- Seems to care about its users
- Huge variety of courses
- 30-day refund policy
- Free certificates of completion
Pros Main Features
- Great user experience
- Offers quality content
- Very transparent with their pricing
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
Transform CSS syntax and property values
The syntax for the transform property is CSS is as follows:
transform: function(values);
See the table below to get familiar with the available functions:
| Function | Values | Description |
|---|---|---|
none |
The default value. Determines that there are no CSS transformations | |
matrix() |
n,n,n,n,n,n | Defines a 2D transformation in a six-valued matrix |
matrix3d |
n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n | Defines a 3D transformation in a 4x4 matrix |
translate() |
x,y | Defines a 2D translation |
translate3d() |
x,y,z | Defines a 3D translation |
translateX() |
x | Defines a horizontal translation |
translateY() |
y | Defines a vertical translation |
translateZ() |
z | Defines a Z-axis translation |
scale() |
x,y | Scales a 2D element |
scale3d() |
x,y,z | Scales a 3D element |
scaleX() |
x | Scales an element horizontally |
scaleY() |
y | Scales an element vertically |
scaleZ() |
z | Scales an element along the z-axis |
rotate() |
angle | Rotates a 2D element by a defined angle |
rotate3d() |
x,y,z,angle | Rotates a 3D element by a defined angle |
rotateX() |
angle | Rotates an element by a defined angle on the x-axis |
rotateY() |
angle | Rotates an element by a defined angle on the y-axis |
rotateZ() |
angle | Rotates an element by a defined angle on the z-axis |
skew() |
x-angle,y-angle | Skews a 2D element |
skewX() |
angle | Skews an element on the x-axis |
skewY() |
angle | Skews an element on the y-axis |
perspective() |
n | Defines the distance between the viewer and z=0 |
In this example, we create and rotate elements using the transform CSS property:
Example
body {
margin: 35px;
background-color: #41a3f4;
}
div.polaroid {
width: 295px;
padding: 11px 11px 21px 15px;
border: 2px solid #BFBFBF;
background-color: red;
box-shadow: 11px 11px 6px #aaaaaa;
}
div.rotate_right {
float: left;
-webkit-transform: rotate(10deg); /* Safari */
-ms-transform: rotate(10deg); /* Internet Explorer 9 */
transform: rotate(10deg);
}
div.rotate_left {
float: right;
-webkit-transform: rotate(-10deg); /* Safari */
-ms-transform: rotate(-10deg); /* Internet Explorer 9 */
transform: rotate(-10deg);
}Note: you can read more about
translate(),translate3d(),translateX()andtranslateY()in this tutorial.
Browser support
Chrome
36+
Edge
12+
Firefox
16+
IE
10+
Opera
23+
Safari
9+
Mobile browser support
Chrome
36+
Firefox
16+
Opera
24+
Safari
9+
