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.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
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)
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>Output result:
(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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
