search

Home >Web Front-end >Front-end Q&A >What is the usage of translate3d in css3

What is the usage of translate3d in css3

WBOY
WBOYOriginal
2022-02-17 16:39:125080browse

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)

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:

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!

html5 css css3 transform
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：What is the difference between sass and css3Next article：What is the difference between sass and css3

Related articles

See more