CSS3 3D Transformation
CSS3 3D Transforms
3D Transforms
CSS3 allows you to use 3D transforms to format elements.
In this chapter, you will learn some of these 3D transformation methods:
rotateX()
rotateY( )
rotateX() method
rotateX() method, rotates the The element to be rotated along the X-axis.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color: #f4ff99;
border:1px solid black;
}
div#div2
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>PHP.CN</div>
<div id="div2">HELLO</div>
</body>
</html>Run the program and try it
rotateY() method
rotateY() method, rotates an element around its Y-axis by a given degree.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</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>
<div>Hello</div>
<div id="div2">Hello.</div>
</body>
</html>Run the program and try it
Conversion attributes
The following table lists all conversion attributes:
| Description | CSS | |
|---|---|---|
| Apply a 2D or 3D transform to an element. | 3 | |
| Allows you to change the position of the element being transformed. | 3 | |
| Specifies how nested elements are displayed in 3D space. | 3 | |
| Specifies the perspective effect of 3D elements. | 3 | |
| Specifies the bottom position of the 3D element. | 3 | |
| Defines whether the element is visible when not facing the screen. | 3 |
| Description | |
|---|---|
| ,n,n, n,n,n,n ,n,n,n,n,n,n,n,n,n )Define the 3D transformation, using a 4x4 matrix of 16 values. | |
| ,y,z)Define 3D transformation. | |
| )Define a 3D translation, using only the values used for the X-axis. | |
| )Define a 3D translation, using only the values used for the Y axis. | |
| )Define a 3D translation, using only the value used for the Z axis. | |
| ,y,z)Define the 3D scaling transformation. | |
| )Defines a 3D scaling transformation, given an X-axis value. | |
| )Define the 3D scaling transformation by giving a Y-axis value. | |
| )Defines a 3D scaling transformation, given a Z-axis value. | |
| ,y,z,angle)Define 3D rotation. | |
| )Defines a 3D rotation along the X-axis. | |
| )Defines a 3D rotation along the Y axis. | |
| )Defines a 3D rotation along the Z axis. | |
| ) Defines the perspective view of a 3D transformed element. |
new file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color: #f4ff99;
border:1px solid black;
}
div#div2
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>PHP.CN</div>
<div id="div2">HELLO</div>
</body>
</html>
Preview
Clear
- Course Recommendations
- Courseware download
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
Let's briefly talk about starting a business in PHP
Quick introduction to web front-end development
Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things
Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum]
Login verification and classic message board
Computer network knowledge collection
Quick Start Node.JS Full Version
The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)