CSS3 2D transformation

CSS3 Transformation

Through CSS3 transformation, we can move, scale, rotate, lengthen or stretch elements.

Browser support

IE10, FireFox and Opera support the transform attribute. Chrome and Safari require the prefix -webkit-.

Note: IE9 requires the prefix -ms-.

2D Transformation

In this chapter you will learn about the 2D transformation method:

translate()

rotate()

scale()

skew()

matrix()

translate() method

The element moves from the current position, according to the given left (x coordinate) and top (y coordinate) displacement parameters:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    /*translate方法位移*/
        div {
        width:100px;
        height:80px;
        background-color:orange;
        position:absolute;
        left:100px;
        top:100px;
        }
        div.one {
        transform:translate(30px,30px);
        z-index:1;
        }
        div.two {
        background-color:blue;
        }
</style>
</head>
<body>
   <div class="one"></div>
   <div class="two"></div>
</body>
</html>

rotate() method

If the element is given a clockwise angle and negative values are allowed, the element will be rotated counterclockwise.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div {
    width: 150px;
    height: 50px;
    background-color: orange;
    text-align: center;
    position: absolute;
    left: 100px;
    top: 100px;
    }
    div.one {
    transform: rotate(30deg);
    -webkit-transform:rotate(30deg);
    }
    div.two {
    background-color: blue;
    color: white;
    }
</style>
</head>
<body>
   <div class="one"></div>
   <div class="two"></div>
</body>
</html>

scale() method

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div{
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    left: 100px;
    height: 100px;
    }
    div.one {
    background-color: red;
    transform: scale(0.5,0.5);
    }
</style>
</head>
<body>
   <div>
     <div class="one"></div>
   </div>
</body>
</html>

skew() method

Through the skew() method, the element is tilted at a given angle, according to the given horizontal line (X axis) and vertical line (Y axis) parameters:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div{
    width:100px;
    height:100px;
    background-color:orange;
    position:absolute;
    left:100px;
    top:100px;
    }
    div.one {
    background-color:red;
    transform:skew(30deg,10deg);
    }
</style>
</head>
<body>
   <div></div>
   <div class="one"></div>
</body>
</html>

matrix() method

The matrix() method combines all 2D transformation methods.

The matrix() method takes six parameters and contains mathematical functions that allow you to: rotate, scale, move and tilt elements.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div{
    width:100px;
    height:100px;
    background-color:orange;
    position:absolute;
    left:100px;
    top:100px;
    }
    div.one {
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    background-color:red;
    }
</style>
</head>
<body>
   <div></div>
   <div class="one"></div>
</body>
</html>

New conversion properties

All conversion properties are listed below:

##Property

Description

transform Suitable for 2D or 3D transformed elements 3

Function

Description

##matrix(n,n,n,n,n,n) Definition of 2D transformation, Use a matrix of six values.

translate(x,y) Defines a 2D transformation that moves elements along the X and Y axes. translateX(n) Defines a 2D transformation that moves elements along the X-axis.

translateY(n) Defines a 2D transformation that moves elements along the Y axis.

scale(x,y) Define 2D scaling transformation to change the width and height of the element.

scaleX(n) Define 2D scaling transformation to change the width of the element.

scaleY(n) Define 2D scaling transformation to change the height of the element.

rotate(angle) Define 2D rotation and specify the angle in the parameters.

skew(x-angle,y-angle) Defines a 2D skew transformation, along the X and Y axes.

skewX(angle) Defines a 2D skew transformation, along the X-axis.

skewY(angle) Defines a 2D skew transformation, along the Y axis.

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> div{ width:100px; height:100px; background-color:orange; position:absolute; left:100px; top:100px; } div.one { transform:matrix(0.866,0.5,-0.5,0.866,0,0); background-color:red; } </style> </head> <body> <div></div> <div class="one"></div> </body> </html>

submit Reset Code

Automatic operation

CSS3 2D transformation

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]