The tools used are all built-in with the system to facilitate the realization of functions.
Article Directory
Show results
1. Create the root directory of the entire file
Create a new folder on the desktop and name it: 3D Album
2. Create internal files of 3D photo album
1. Create index.html
1. Double-click to enter the 3D album folder, and create a new txt file.
2. Copy the following code to the new text, save and exit.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css-3d旋转</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!--/*外层最大容器*/-->
<div class="wrap">
<!-- /*包裹所有元素的容器*/-->
<div class="cube">
<!--前面图片 -->
<div class="out_front">
<img src="img/1.jpg" class="pic"/>
</div>
<!--后面图片 -->
<div class="out_back">
<img src="img/2.jpg" class="pic"/>
</div>
<!--左图片 -->
<div class="out_left">
<img src="img/3.jpg" class="pic"/>
</div>
<div class="out_right">
<img src="img/4.jpg" class="pic"/>
</div>
<div class="out_top">
<img src="img/5.jpg" class="pic"/>
</div>
<div class="out_bottom">
<img src="img/6.jpg" class="pic"/>
</div>
<!--小正方体 -->
<span class="in_front">
<img src="img/7.jpg" class="in_pic" />
</span>
<span class="in_back">
<img src="img/8.jpg" class="in_pic" />
</span>
<span class="in_left">
<img src="img/9.jpg" class="in_pic" />
</span>
<span class="in_right">
<img src="img/10.jpg" class="in_pic" />
</span>
<span class="in_top">
<img src="img/11.jpg" class="in_pic" />
</span>
<span class="in_bottom">
<img src="img/12.jpg" class="in_pic" />
</span>
</div>
</div>
</body>
</html>
as the picture shows
3. Change the file name to index.html
2. Create the css folder and its contents
1. Create a new folder under the 3D album folder and name it: css
2. Go to the css folder and create a new txt file
3. Insert the following code into the newly created text
html{
background: #000;
height: 100%;
}
/*最外层容器样式*/
.wrap{
position: relative;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
margin: auto;
/*改变左右上下,图片方块移动*/
}
/*包裹所有容器样式*/
.cube{
width: 200px;
height: 200px;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
-webkit-animation: rotate 20s infinite;
/*匀速*/
animation-timing-function: linear;
}
@-webkit-keyframes rotate{
from{
transform: rotateX(0deg) rotateY(0deg);}
to{
transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
transition: all .4s;
}
/*定义所有图片样式*/
.pic{
width: 200px;
height: 200px;
}
.cube .out_front{
transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{
transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left{
transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right{
transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top{
transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{
transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式*/
.cube span{
display: bloack;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
.cube .in_pic{
width: 100px;
height: 100px;
}
.cube .in_front{
transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{
transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{
transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{
transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{
transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{
transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front{
transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{
transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{
transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{
transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{
transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{
transform: rotateX(-90deg) translateZ(200px);
}
4. Save the text and exit.
5. Rename the txt file: index.css
3. After creating the img folder and its contents
1. Create a new folder under the 3D album folder and name it: img
2. Then copy 12 photos to the img folder
Naming is as shown in the picture below. The photo name must be 1.jpg 2.jpg 3.jpg 4.jpg to 12.jpg, and no other name is allowed. 1.jgp 2.jgp 3.jpg 4.jpg and so on, up to 12.jpg, that is, up to 12 photos.
4. About the picture size and modification method
1.用win10系统自带的 画图3D打开照片
2. Right-click the picture, select the tool in the frame of the photo to open the photo, the tool comes with the win10 system.
3. After opening the photo, click the crop in the upper left corner to get the interface shown in the figure below.
4. Then select the 1:1 option on the right, a square marquee will appear in the picture, and the height and width pixels on the right are already the same.
5. Fuel Use the mouse to drag the marquee to move up or down to get the desired part.
6. There is no specific requirement for the pixels of the photo, as long as the height and width are equal.
7. Finally, click Finish and Save to get the desired size.
Summarize
Double-click to run the index.html file, it will open in the browser, and you will get a 3D rotating photo album.
If you think it is good, welcome to like + comment + favorite.
download method
Link: https://pan.baidu.com/s/1Nl4iqn5EwRRDwYYel6SzWA
Extraction code: sx97