3D
简称3维坐标系 比二维坐标系多一个Z轴
3D displacement
3D displacement has a movable Z axis on the basis of 2D
transform: translate3d(x,y,z);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
/* 位移3D的写法 */
/* transform: translate3d(200px, 200px, 200px); */
/* 或者可以这样写 */
transform: translateX(400px) translateY(400px) translateZ(400px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Precautions
- The x-axis and y-axis generally use px and percentage as the unit
- The z-axis generally uses px as the unit, and the perspective function must be used
- The z-axis moving outward is generally a positive value, and moving inward is a negative value.
perspective
Features
- Perspective is the viewing distance, the unit is px
- Perspective is written on the parent element of the observed element.
- The larger the perspective unit, the smaller the objects you see, and the smaller the perspective unit, the larger the objects you see.
- In the case of fixed perspective, the larger the z-axis, the larger the objects you see, and the smaller the z-axis, the smaller the objects you see.
In this picture, d is perspective, which is located between the human eye and the observed object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
perspective: 500px;
}
.box {
width: 200px;
height: 200px;
margin: 200px auto;
background-color: blue;
transform: translateZ(100px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3D rotation
3D rotation means that the element can be rotated along the x-axis, y-axis, z-axis or a custom axis in a three-dimensional plane
rotateX
The direction of the bent fingers of the left hand is the positive direction of the x-axis
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
/* 3D效果的实现，必须依赖于透视 */
perspective: 500px;
}
img {
display: block;
/* 设置圆角边框 */
border-radius: 50%;
width: 500px;
/* 使用动画 */
animation: move 2s linear 0s infinite alternate;
/* 让元素居中对齐 */
margin: 200px auto;
}
/* 定义动画 */
@keyframes move {
form {
transform: rotateX(0deg);
}
to {
transform: rotateX(360deg);
}
}
</style>
</head>
<body>
<img src="./img/girl.jpg" alt="">
</body>
</html>
rotateY
The direction in which the fingers of the left hand are bent is the positive direction of the y-axis
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
/* 加此属性是为了更好的使用3d效果 */
perspective: 500px;
}
img {
/* 转换成块级元素 */
display: block;
width: 500px;
/* 移动的中心位置 */
margin: 200px auto;
/* 使用动画 */
animation: move 2s linear 0s infinite alternate;
}
/* 定义动画 */
@keyframes move {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(180deg);
}
}
</style>
</head>
<body>
<img src="./img/girl.jpg" alt="">
</body>
</html>
rotateZ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
/* 添加透视 更好的实现3D效果 */
perspective: 500px;
}
img {
/* 转换成块级元素 */
display: block;
width: 500px;
margin: 200px auto;
animation: move 2s linear 0s infinite alternate;
}
/* 定义动画 */
@keyframes move {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<img src="./img/girl.jpg" alt="">
</body>
</html>
transform-style
transform-style; preserve-3d keeps child elements in 3d space environment
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
perspective: 500px;
}
.box {
/* 开启定位 */
position: relative;
width: 400px;
height: 400px;
margin: 200px auto;
/* 父元素开启3d环境 */
transform-style: preserve-3d;
animation: clinopodium 2s linear 0s infinite alternate;
}
/*使用属性选择器设置样式 */
div[class^=son] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
/* 设置子元素的第二个样式 */
.box div:nth-of-type(2) {
background-color: blue;
transform: rotateX(112deg);
}
.box div:nth-of-type(3) {
background-color: purple;
transform: rotateX(230deg);
}
/* 定义动画 */
@keyframes clinopodium {
0% {
transform: rotatex(0deg);
}
100% {
transform: rotateX(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
</div>
</body>
</html>
Demonstration of the case
Double-sided box
- First prepare a big box with two small boxes inside
- Turn one of the boxes 180deg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
perspective: 400px;
}
.box {
position: relative;
width: 400px;
height: 400px;
margin: 200px auto;
transition: all 1S linear 0s;
/* 开启子元素在3d空间的环境 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 400px;
color: #cccccc;
font-weight: 700;
border-radius: 50%;
}
.front {
background-color: pink;
z-index: 1;
}
.back {
background-color: purple;
/* 像手机一样 背靠背 旋转 */
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">尧子陌</div>
<div class="back">临风笑却世间</div>
</div>
</body>
</html>
3D Navigation Bar Case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 注意 视距写在li上面 */
* {
margin: 0;
padding: 0;
}
ul {
width: 600px;
margin: 100px auto;
}
li {
/* 设置定位 子绝父相 */
float: left;
width: 100px;
height: 35px;
list-style: none;
perspective: 500px;
}
.box {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 开启子元素的 3d效果 */
transform-style: preserve-3d;
/* 使用过渡效果 */
transition: all 0.4s linear 0s;
}
/* 鼠标经过box旋转90deg */
.box:hover {
transform: rotateX(90deg);
}
.front,
.bottom {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 35px;
color: cornsilk;
font-family: '楷体';
}
.front {
background-color: blue;
z-index: 1;
transform: translateZ(17.5px);
}
.bottom {
background-color: brown;
/* 先向下移动17.5px 再沿X轴旋转90deg */
transform: translateY(17.5px) rotateX(-90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front">hello</div>
<div class="bottom">尧子陌</div>
</div>
</li>
<li>
<div class="box">
<div class="front">hello</div>
<div class="bottom">尧子陌</div>
</div>
</li>
</ul>
</body>
</html>
3D Trojan Horse
Ideas
- The analysis is as follows: set the perspective to the body and set the 3d effect to the parent element of the div
- Put each box in the correct position and use animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
/* 视距 */
perspective: 1000px;
}
section {
position: relative;
width: 200px;
height: 200px;
margin: 200px auto;
/* 让子元素显示3d属性 */
transform-style: preserve-3d;
/* 使用动画 */
animation: rotate 2s linear 0s infinite;
}
section:hover {
animation-play-state: paused;
}
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
section div {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
border-radius: 50px;
}
div img {
width: 200px;
height: 200px;
}
section div:nth-of-type(1) {
transform: rotateY(0deg) translateZ(300px);
}
section div:nth-of-type(2) {
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-of-type(3) {
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-of-type(4) {
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-of-type(5) {
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-of-type(6) {
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<section>
<div><img src="./img/girl.jpg" alt=""></div>
<div><img src="./img/girl.jpg" alt=""></div>
<div><img src="./img/girl.jpg" alt=""></div>
<div><img src="./img/girl.jpg" alt=""></div>
<div><img src="./img/girl.jpg" alt=""></div>
<div><img src="./img/girl.jpg" alt=""></div>
</section>
</body>
</html>
Browser private prefix
