What is the usage of translate3d in css3-Front-end Q&A-php.cn

What is the usage of translate3d in css3

WBOY

Release： 2022-02-17 16:39:12

Original

5012 people have browsed it

In css3, translate3d() is used in conjunction with the transform attribute to define the 3D transformation of the element. The syntax is "tranform: translate3d(x,y,z)"; the parameters respectively represent the position of the element in x, The distance moved in the y and z axis directions.

What is the usage of translate3d in css3

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the usage of translate3d in css3

translate3d(x,y,z) as the value of the transform attribute, used to define 3D transformation.

The transform attribute applies 2D or 3D transformation to the element

The syntax is:

 tranform: translate3d(x,y,z)

Copy after login

The meaning of these three parameters:

transform: translateX(100px ): Only move on the x-axis

transform: translateY(100px): Only move on the y-axis

transform: translateZ(100px): Only move on the z-axis

transform: translate3d(x,y,z): xyz respectively represent the distance in the direction of the axis to be moved

The example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
.div:hover {
transform:translate3d(8px,8px,0);
}
.div {
width:100px;
height:80px;
background-color: pink;
}
</style>
  <head>
<body>
<div class="div"></div>
</body>
</html>

Copy after login

Output result:

What is the usage of translate3d in css3

(Learning video sharing: css video tutorial)

The above is the detailed content of What is the usage of translate3d in css3. For more information, please follow other related articles on the PHP Chinese website!