1.圓柱體：（原文檔：https://blog.csdn.net/qq_43144014/article/details/82778764）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>3D旋轉</title>
<style type="text/css">
*{padding: 0;
margin: 0;}
body,html{height:100%;}
body{background-image: url("images/beijing.jpg");background-size: 100% 100%;}
#box{width: 280px;
height: 400px;
position: fixed;
left: 0;
right: 0;
top:0;
bottom: 0;
margin: auto;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
animation: go 45s linear infinite;
}
#box img{width: 280px;
height: 400px;
position: absolute;
left: 0;
top: 0;
}
#box img:nth-child(1){
transform: rotateY(0deg) translateZ(650px);}
#box img:nth-child(2){
transform: rotateY(36deg) translateZ(650px);}
#box img:nth-child(3){
transform: rotateY(72deg) translateZ(650px);}
#box img:nth-child(4){
transform: rotateY(108deg) translateZ(650px);}
#box img:nth-child(5){
transform: rotateY(144deg) translateZ(650px);}
#box img:nth-child(6){
transform: rotateY(180deg) translateZ(650px);}
#box img:nth-child(7){
transform: rotateY(216deg) translateZ(650px);}
#box img:nth-child(8){
transform: rotateY(252deg) translateZ(650px);}
#box img:nth-child(9){
transform: rotateY(288deg) translateZ(650px);}
#box img:nth-child(10){
transform: rotateY(324deg) translateZ(650px);}
@keyframes go {
0%{transform: rotateX(0deg) rotateY(0deg);}
25%{transform: rotateX(20deg) rotateY(180deg);}
50%{transform: rotateX(0deg) rotateY(360deg);}
75%{transform: rotateX(-20deg) rotateY(540deg);}
100%{transform: rotateX(0deg) rotateY(720deg);}
}
</style>
</head>
<body>
<div id="box">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
<img src="images/7.jpg">
<img src="images/8.jpg">
<img src="images/9.jpg">
<img src="images/10.jpg">
</div>
</body>
</html>
2.圓柱體拖拽：（原文鏈接：https://www.cnblogs.com/yidaixiaohui/p/8447015.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,
body {
margin: 0;
padding: 0;
background-color: #29454d;
/*禁止文字被選中*/
-moz-user-select: none;
/*火狐*/
-webkit-user-select: none;
/*webkit瀏覽器*/
-ms-user-select: none;
/*IE10*/
-khtml-user-select: none;
/*早期瀏覽器*/
user-select: none;
overflow: hidden;
}
.box {
position: relative;
height: 500px;
width: 500px;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 2000px;
}
.di {
position: absolute;
left: 50%;
top: 50%;
height: 200px;
width: 200px;
transform: translate(-50%, -50%) rotatex(90deg);
transform-style: preserve-3d;
}
.z {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
transform-style: preserve-3d;
/*transform: rotatez(1deg);*/
}
p {
margin: 0;
position: absolute;
top: 0;
/*爲了保證圓心在父盒子中心，父盒子旋轉時圓心穩定，所以設置left*/
left: 25px;
height: 200px;
width: 150px;
border: 2px solid #fd7068;
box-sizing: border-box;
background-color: #ffffff;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/*opacity: .7;*/
font-size: 10px;
line-height: 200px;
text-align: center;
/*box-shadow: 0 0 100px #16ff8b;*/
/*倒影，不兼容*/
-webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5));
box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5));
/*backface-visibility: hidden;*/
}
</style>
</head>
<body>
<div class="box">
<div class="di">
<div class="z">
<p>可以拖拽圖片文件進來</p>
<p>可以拖拽圖片文件進來</p>
<p>可以拖拽圖片文件進來</p>
<p>可以拖拽圖片文件進來</p>
<p>可以拖拽圖片文件進來</p>
<p>可以拖拽圖片文件進來</p>
<p>可以拖拽圖片文件進來</p>
<p>可以拖拽圖片文件進來</p>
<p>可以拖拽圖片文件進來</p>
<p>可以拖拽圖片文件進來</p>
<p>可以拖拽圖片文件進來</p>
<p>可以拖拽圖片文件進來</p>
</div>
</div>
</div>
<script>
window.onload = function () {
setPs();
move();
drop();
}
//給每個p標籤設置位置
function setPs() {
var ps = document.getElementsByTagName('p');
for (var i = 0; i < ps.length; i++) {
ps[i].style.transform = 'rotatex(-90deg) rotatey(' + i * 30 + 'deg) translatez(400px)'
}
}
//鼠標拖動旋轉
function move() {
var zBox = document.querySelector('.z');
var xBox = document.querySelector('.di');
//聲明計算鼠標移動速度用的變量
var speedTimer = null;
var speedX = 0;
var speedY = 0;
//聲明記錄旋轉角度的兩個變量
var xDegNow = 90;
var zDegNow = 0;
//聲明變量記錄要旋轉的角度
var xDegDistance = 0;
var zDegDistance = 0;
//聲明變量記錄是否發生鼠標移動事件
var isMove = false;
window.onmousedown = function (e) {
//鼠標按下
//清除過渡屬性
xBox.style.transition = '';
zBox.style.transition = '';
//記錄按下的座標以及計算速度的初始座標
var xstart = e.clientX;
var speedX_start = xstart;
var ystart = e.clientY;
var speedY_start = ystart;
//記錄用來計算速度的初始時間
var tstart = new Date().getTime();
var tnow = tstart;
//設置計時器更新計算速度的當時時間
speedTimer = setInterval(function () {
tnow = new Date().getTime();
},10)
window.onmousemove = function (e) {
//鼠標移動
isMove = true;
//記錄當時的座標計算距離
var xnow = e.clientX;
var ynow = e.clientY;
var xDistance = xnow - xstart;
var yDistance = ynow - ystart;
//如果計時超過一定時間（10毫秒），計算速度
if (tnow - tstart >= 10) {
//速度=（現在的座標-初始座標）/（現在時間-初始時間）
speedX = (xnow - speedX_start) / (tnow - tstart);
speedY = (ynow - speedY_start) / (tnow - tstart);
//讓初始時間和座標等於現在的時間和座標
tstart = tnow;
speedX_start = xnow;
speedY_start = ynow;
}
//把鼠標移動距離計算成角度後設置到頁面上
zDegDistance = zDegNow - (xDistance / 10);
zBox.style.transform = 'rotatez(' + zDegDistance + 'deg)';
xDegDistance = xDegNow - (yDistance / 10);
xDegDistance = xDegDistance > 179 ? 179 : xDegDistance < 1 ? 1 : xDegDistance;
xBox.style.transform = 'translate(-50%,-50%) rotatex(' + xDegDistance + 'deg)';
};
};
window.onmouseup = function (e) {
//鼠標鬆開
//清除計時器 清除鼠標移動事件
clearTimeout(speedTimer);
window.onmousemove = null;
//判斷如果發生移動
if (isMove) {
//添加過渡屬性
xBox.style.transition = 'all 0.5s ease-out';
zBox.style.transition = 'all 0.5s ease-out';
//根據速度計算目標角度，設置到頁面上
zDegDistance = zDegDistance - (speedX * 10);
zBox.style.transform = 'rotatez(' + zDegDistance + 'deg)';
xDegDistance = xDegDistance - (speedY * 10);
xDegDistance = xDegDistance > 179 ? 179 : xDegDistance < 1 ? 1 : xDegDistance;
xBox.style.transform = 'translate(-50%,-50%) rotatex(' + xDegDistance + 'deg)';
//記錄當前角度的值更新
xDegNow = xDegDistance;
zDegNow = zDegDistance;
//用到的變量重置
isMove = false;
speedX = 0;
speedY = 0;
xDegDistance = 0;
zDegDistance = 0;
}
};
}
//鼠標拖拽文件
function drop() {
//取消鼠標拖拽文件進入窗口的默認行爲
window.ondragover = function (e) {
e.preventDefault();
}
window.ondrop = function (e) {
e.preventDefault();
}
//添加拖拽到p標籤的事件
var ps = document.getElementsByTagName('p');
for (var i = 0; i < ps.length; i++) {
ps[i].index = i;
ps[i].ondrop = function (e) {
var w = new FileReader();
w.index = this.index;
w.readAsDataURL(e.dataTransfer.files[0]);
w.onload = function () {
ps[this.index].style.backgroundImage = 'url(' + w.result + ')';
ps[this.index].innerHTML = '';
}
}
}
}
</script>
</body>
</html>
3.立方體（原文鏈接：https://blog.csdn.net/qq_41866776/article/details/96695938）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cube</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #333;
}
ul {
width: 300px;
height: 300px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/*3d空間*/
transform-style: preserve-3d;
animation: box 20s linear infinite;
}
@keyframes box {
/*3d旋轉 x y z deg*/
from {
transform: rotate3d(0, 0, 0, 0deg);
}
to {
transform: rotate3d(1, 1, 1, 360deg);
}
}
li {
width: 300px;
height: 300px;
list-style: none;
border: 1px solid black;
position: absolute;
opacity: 0.8;
box-shadow: 0px 0px 10px white;
}
li:nth-child(1) {
background: url(capture1.png);
background-position: center;
background-size: cover;
transform: translateZ(150px);
}
/*後*/
li:nth-child(2) {
background: url(capture1.png);
background-position: center;
background-size: cover;
transform: translateZ(-150px);
}
/*左*/
li:nth-child(3) {
background: url(capture1.png);
background-position: center;
background-size: cover;
transform: rotateY(90deg) translateZ(-150px);
}
/*右*/
li:nth-child(4) {
background: url(capture1.png);
background-position: center;
background-size: cover;
transform: rotateY(90deg) translateZ(150px);
}
/*上*/
li:nth-child(5) {
background: url(capture1.png);
background-position: center;
background-size: cover;
transform: rotateX(90deg) translateZ(150px);
}
li:nth-child(6) {
background: url(capture1.png);
background-position: center;
background-size: cover;
transform: rotateX(90deg) translateZ(-150px);
}
ul:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
4.個人修改（圓柱體+倒影）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>3D旋轉</title>
<style type="text/css">
*{padding: 0;
margin: 0;}
body,html{height:100%;}
body{background-image: url("capture.png");background-size: 100% 100%;}
#box{width: 280px;
height: 400px;
position: fixed;
left: 0;
right: 0;
top:0;
bottom: 0;
margin: auto;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
animation: go 45s linear infinite;
}
#box img{width: 280px;
height: 400px;
position: absolute;
left: 0;
top: 0;
/*box-shadow: 0 0 100px #16ff8b;*/
/*倒影，不兼容*/
-webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5));
box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5));
/*backface-visibility: hidden;*/
}
#box img:nth-child(1){
transform: rotateY(0deg) translateZ(650px);}
#box img:nth-child(2){
transform: rotateY(36deg) translateZ(650px);}
#box img:nth-child(3){
transform: rotateY(72deg) translateZ(650px);}
#box img:nth-child(4){
transform: rotateY(108deg) translateZ(650px);}
#box img:nth-child(5){
transform: rotateY(144deg) translateZ(650px);}
#box img:nth-child(6){
transform: rotateY(180deg) translateZ(650px);}
#box img:nth-child(7){
transform: rotateY(216deg) translateZ(650px);}
#box img:nth-child(8){
transform: rotateY(252deg) translateZ(650px);}
#box img:nth-child(9){
transform: rotateY(288deg) translateZ(650px);}
#box img:nth-child(10){
transform: rotateY(324deg) translateZ(650px);}
@keyframes go {
0%{transform: rotateX(0deg) rotateY(0deg);}
25%{transform: rotateX(20deg) rotateY(180deg);}
50%{transform: rotateX(0deg) rotateY(360deg);}
75%{transform: rotateX(-20deg) rotateY(540deg);}
100%{transform: rotateX(0deg) rotateY(720deg);}
}
</style>
</head>
<body>
<div id="box">
<img src="capture1.png">
<img src="capture1.png">
<img src="capture1.png">
<img src="capture1.png">
<img src="capture1.png">
<img src="capture1.png">
<img src="capture1.png">
<img src="capture1.png">
<img src="capture1.png">
<img src="capture1.png">
</div>
</body>
</html>