1. The characteristics of 3D
- Into the big far small
- Obscuration behind the object is invisible
x: right is positive
y: down is positive
z: positive outside the screen, negative inside
2. The translate of 3D movement
transform:translateX(100px);//It's just the x-axis movement. px or percentage transform:translateY(100px);//Just y-axis movement, px or percentage transform:translateZ(100px);//It is only the z-axis movement, generally in px unit transform:translate3D(x,y,z);//x,y,z movement, can not be omitted, you can write 0
Perspective
- To produce 3D effects on web pages requires perspective (understood as 3D objects projected on a 2D plane)
- Perspective is also called viewing distance: the distance from the human eye to the screen
- The closer the distance to the visual point, the larger the image on the computer screen, the smaller the perspective value, and the larger the object looks
- The unit of perspective is pixels
Notice:
Perspective is written in the parent box of the observed element
transtlateZ
1. To be used with perspactive, if only translateZ is written, the effect of 3d movement on the z-axis cannot be seen
2. The perspective is written in the parent box of the observed element
3. The larger the perspective value, the larger the viewing distance, the farther the eyes are from the object, and the smaller the visual effect
4. The larger the translateZ value, the closer the object is to the outside of the screen, and the larger the visual effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
perspective: 500px;
}
div{
width: 100px;
height: 100px;
margin: 100px auto;
background-color: orange;
transform: translate3d(0,0,100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3d movement and perspective
3. 3D rotation rotate3d
The element can be rotated along the x-axis, y-axis, z-axis or a custom axis in the three-dimensional plane
transform:rotateX(45deg);//Rotate 45 degrees along the positive x-axis transform:rotateY(45deg);//Rotate 45 degrees along the positive y-axis transform:rotateZ(45deg);//Rotate 45 degrees along the positive z-axis transform:rotate3d(x,y,z,deg);//Rotate deg rees along a custom axis (vector)
The left hand is bent, the thumb points to the positive direction of x and y, and the bending direction of the four fingers is the positive direction of the element's rotation along the x-axis\y-axis
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
perspective: 500px;
}
img {
width: 200px;
height: 200px;
margin: 50px;
transition: all 3s ;
}
.dog1:hover{
transform: rotateX(360deg);
}
.dog2:hover{
transform: rotateY(360deg);
}
.dog3:hover{
transform: rotateZ(360deg);
}
.dog4:hover{
transform: rotate3d(100,100,100,360deg);
}
</style>
</head>
<body>
<img class="dog1" src="../images/macho.jpg" alt="">
<img class="dog2" src="../images/macho.jpg" alt="">
<img src="../images/media/pic.jpg" alt="" class="dog3">
<img class="dog4" src="../images/macho.jpg" alt="">
<!-- mmss -->
</body>
</html>
3d rotation
3D rendering transform-style**
- Control whether the sub-element opens the 3D environment
- transform-style:flat; sub-element does not open 3d stereoscopic space (default/not write)
- transform-style:preserve-3d; child elements open three-dimensional space
- The code is added to the parent element, but the child element is affected
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
perspective: 500px;
}
.box{
position: relative;
width: 200px;
height: 200px;
background-color: purple;
margin: 100px auto;
transform-style: preserve-3d;
transition: all 2s;
}
.box:hover{
transform: rotateY(70deg);
}
.box div{
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
background-color: orange;
}
.box div:last-child{
background-color: olivedrab;
transform: rotate3d(1,0,0,70deg);
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
</div>
</body>
</html>
3d rendering
practise
1. Flip both sides
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
perspective: 500px;
}
.box{
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
transform-style: preserve-3d;
}
.box:hover{
transform: rotateY(180deg);
}
.front,
.back{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
line-height: 200px;
font-size: 20px;
text-align: center;
color: #ddd;
background-color: black;
border-radius: 50%;
backface-visibility: hidden;
}
.front{
transform: translateZ(1px);
/* z-index: 1;invalid */
}
div.back{
background-color: skyblue;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">Castle Peak does not change</div>
<div class="back">green water flowing</div>
</div>
</body>
</html>
3d flip on both sides
2. 3d navigation bar
The bottom box is first moved to the bottom (think of a cube): first move down and then rotate -90 degrees along the x-axis
Then move the face box to the positive direction of the z-axis, because the rotation is based on the center of the cube
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
margin: 100px;
}
ul li{
float: left;
/* perspective: 500px; */
margin: 30px;
width: 100px;
height: 50px;
list-style: none;
}
.nav{
position: relative;
transform-style: preserve-3d;
width: 100px;
height: 50px;
transition: all 0.4s;
}
.face,
.bottom{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}
.face{
background-color: green;
transform: rotateZ(25px);
}
.bottom{
background-color: aquamarine;
/* write first move */
transform: translateY(50%) rotateX(-90deg) ;
}
.nav:hover{
transform: rotateX(90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="nav">
<div class="face">1</div>
<div class="bottom">2</div>
</div>
</li>
<li>
<div class="nav">
<div class="face">3</div>
<div class="bottom">4</div>
</div>
</li>
<li>
<div class="nav">
<div class="face">5</div>
<div class="bottom">6</div>
</div>
</li>
</ul>
</body>
</html>
3. Carousel
Rotate first and then move, using animation properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
perspective: 1000px;
background-color: #ccc;
}
img{
width: 200px;
height: 200px;
}
section{
position: relative;
width: 200px;
height: 300px;
margin: 200px auto;
transform-style: preserve-3d;
transition: all .4s;
animation: move 20s linear infinite;
/* background: url(../images/media/bg2.png) no-repeat; */
}
section:hover{
animation-play-state:paused;
}
@keyframes move{
0%{
transform: rotateY(0);
}
100%{
transform: rotateY(360deg);
}
}
@keyframes run{
0%{
background-position: 0;
}
100%{
background-position: -1600px 0;
}
}
section div{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
background: url(../images/media/bear.png) no-repeat;
animation: run 1s infinite steps(8);
}
section div:nth-child(1){
transform: translateZ(300px);
}
section div:nth-child(2){
transform: rotateY(60deg) translateZ(300px) ;
}
section div:nth-child(3){
transform: rotateY(120deg) translateZ(300px) ;
}
section div:nth-child(4){
transform: rotateY(180deg) translateZ(300px) ;
}
section div:nth-child(5){
transform: rotateY(240deg) translateZ(300px) ;
}
section div:nth-child(6){
transform: rotateY(300deg) translateZ(300px) ;
}
section div:last-child{
transform: rotateY(0) translateZ(0) ;
animation:0;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="mid"></div>
</section>
</body>
</html>