Can CSS3 create 3D effects?-Front-end Q&A-php.cn

Can CSS3 create 3D effects?

WBOY

Release： 2022-06-15 17:50:12

Original

1553 people have browsed it

css3 can create 3D effects. Method: 1. Use the rotateX() method, which can set the element to rotate around the X-axis of a given degree. The syntax is "Element {transform: rotateX (rotate around the X-axis by the number of degrees);}"; 2. Use rotateY( ) method, which can set the element to be rotated around the Y-axis at a given degree. The syntax is "Element {transform: rotateY (rotate around the Y-axis by the number of degrees);}".

Can CSS3 create 3D effects?

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

css3 for 3D effects

CSS3 allows you to use 3D transformations to format elements.

3D conversion method:

rotateX()

rotateX() method, rotates an element around its X-axis at a given degree.

The example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateX 方法.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>

Copy after login

Output result:

Can CSS3 create 3D effects?

##rotateY()

rotateY () method, rotates an element about its Y-axis by a given degree.

Examples are as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateY方法.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>

Copy after login

Output results:

Can CSS3 create 3D effects?

(Learning video sharing:

css video tutorial,html video tutorial)

The above is the detailed content of Can CSS3 create 3D effects?. For more information, please follow other related articles on the PHP Chinese website!