Home >Web Front-end >CSS Tutorial >Using CSS3 3D transform functions

Using CSS3 3D transform functions

王林
王林forward
2023-09-16 14:33:07968browse

Using 3d transform, we can move elements to the x-axis, y-axis and z-axis. The following are some methods of CSS3 3D transform-

The following methods are used to call 3D transform-

##3translateX(x)4translateY(y) 5translateZ(z)
Sr.No. Value and Description
1 matrix3d(n,n, n,n,n,n,n,n,n,n,n, n,n,n,n,n)

is used to transform elements using the 16 values ​​of the matrix

2 translate3d(x,y,z)

Used to transform elements using the x-axis, y-axis and z-axis

For transforming elements using the x-axis

Used to transform elements using the y-axis

Used to Transform elements using the y-axis

The following is the code of the CSS3 3D transformation function-

Example

Live demonstration

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
   display: inline-block;
   width: 200px;
   height: 200px;
   border: 1px solid #CCC;
   margin-left: 20px;
}
.rotateX {
   width: 100%;
   height: 100%;
   background: rgb(52, 0, 241);
   transform: perspective(600px) rotateX(85deg);
}
.rotateY {
   width: 100%;
   height: 100%;
   background: rgb(55, 0, 255);
   transform: perspective(600px) rotateY(75deg);
}
.translateZ{
   width: 100%;
   height: 100%;
   background: rgb(55, 0, 255);
   transform: perspective(600px) translateZ(-200px);
}
</style>
</head>
<body>
<h1>3D transform function example</h1>
<div class="container">
<div class="rotateX"></div>
</div>
<div class="container">
<div class="rotateY"></div>
</div>
<div class="container">
<div class="translateZ"></div>
</div>
</body>
</html>

Output

The above code will produce the following output-

使用 CSS3 3D 变换函数

The above is the detailed content of Using CSS3 3D transform functions. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete