Home > Article > Web Front-end > Can CSS3 create 3D effects?
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);}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
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>Output result:
##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>Output results:
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!
