旋转照片墙
首先，来看下，是什么效果吧，上效果图 ↓
其实这个东西，很容易制作，先说下思路， 把照片都给叠在一起，然后 rotateY 旋转，给每张图片 旋转不一样的角度能构成一圈， 然后translateZ 出去就好了，最后一步，父级转起来。
搭建好基本的 html 和 css ↓ 已经写好注释啦。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
*{
padding: 0;
margin: 0;
}
:root,body{ /* root在html也就是文档，文档是有高度的，而body 是没有高度的，所以继承下来，给 body的子元素使用*/
height: 100%;
}
.wra{
position: absolute; /* 把父级作为容器，定位到屏幕的中间去 */
width: 200px;
height: 100px;
left: calc(50% - 100px);
top: calc(50% - 50px);
}
.img{
position: absolute; /*设置定位属性，然后所与的图片就会 叠在一起。*/
width: 200px;
height: 100px;
}
.img:nth-of-type(1){
background-image: url('./img/rotatePic/u=1036157886,1414018506&fm=26&gp=0.jpg');
background-size: cover; /*这个参数，是为了更好的显示完整的图片，既是他有可能显示不全。*/
}
.img:nth-of-type(2){
background-image: url('./img/rotatePic/u=1252635897,4048351284&fm=26&gp=0.jpg');
background-size: cover;
}
.img:nth-of-type(3){
background-image: url('./img/rotatePic/u=1369094069,1969348532&fm=26&gp=0.jpg');
background-size: cover;
}
.img:nth-of-type(4){
background-image: url('./img/rotatePic/u=1891680577,1135327170&fm=26&gp=0.jpg');
background-size: cover;
}
.img:nth-of-type(5){
background-image: url('./img/rotatePic/u=215760299,4224999617&fm=26&gp=0.jpg');
background-size: cover;
}
.img:nth-of-type(6){
background-image: url('./img/rotatePic/u=4188003421,389717180&fm=26&gp=0.jpg');
background-size: cover;
}
.img:nth-of-type(7){
background-image: url('./img/rotatePic/下载 (1).jfif');
background-size: cover;
}
.img:nth-of-type(8){
background-image: url('./img/rotatePic/下载 (2).jfif');
background-size: cover;
}
style>
head>
<body>
<div class="wra">
<div class="img">div>
<div class="img">div>
<div class="img">div>
<div class="img">div>
<div class="img">div>
<div class="img">div>
<div class="img">div>
<div class="img">div>
div>
body>
html>
效果如下：
基本架子搭建好后，给每张图片，旋转不同的位置。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
*{
padding: 0;
margin: 0;
}
:root,body{
height: 100%;
}
.wra{
position: absolute;
width: 200px;
height: 100px;
left: calc(50% - 100px);
top: calc(50% - 50px);
}
.img{
position: absolute;
width: 200px;
height: 100px;
}
.img:nth-of-type(1){
background-image: url('./img/rotatePic/u=1036157886,1414018506&fm=26&gp=0.jpg');
background-size: cover;
/*第一张图片，就不用旋转了，让他在原位置就好。*/
}
.img:nth-of-type(2){
background-image: url('./img/rotatePic/u=1252635897,4048351284&fm=26&gp=0.jpg');
background-size: cover;
transform: rotateY(45deg);
}
.img:nth-of-type(3){
background-image: url('./img/rotatePic/u=1369094069,1969348532&fm=26&gp=0.jpg');
background-size: cover;
transform: rotateY(90deg);
}
.img:nth-of-type(4){
background-image: url('./img/rotatePic/u=1891680577,1135327170&fm=26&gp=0.jpg');
background-size: cover;
transform: rotateY(135deg);
}
.img:nth-of-type(5){
background-image: url('./img/rotatePic/u=215760299,4224999617&fm=26&gp=0.jpg');
background-size: cover;
transform: rotateY(180deg);
}
.img:nth-of-type(6){
background-image: url('./img/rotatePic/u=4188003421,389717180&fm=26&gp=0.jpg');
background-size: cover;
transform: rotateY(225deg);
}
.img:nth-of-type(7){
background-image: url('./img/rotatePic/下载 (1).jfif');
background-size: cover;
transform: rotateY(270deg);
}
.img:nth-of-type(8){
background-image: url('./img/rotatePic/下载 (2).jfif');
background-size: cover;
transform: rotateY(315deg);
}
style>
head>
<body>
<div class="wra">
<div class="img">div>
<div class="img">div>
<div class="img">div>
<div class="img">div>
<div class="img">div>
<div class="img">div>
<div class="img">div>
<div class="img">div>
div>
body>
html>
旋转好位置后，添加 translateZ() 参数，分开图片。因为，translateZ 也是 transform 的参数之一，所以要添加在rotate后面接上。最后，记得在15行添加上 perspective 属性。不懂什么是 perspective 属性的话，请点击→ css3系列之详解perspective
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Documenttitle> 8 <style> 9 *{ 10 padding: 0; 11 margin: 0; 12 } 13 :root,body{ 14 height: 100%; 15 perspective: 1000px; 16 } 17 .wra{ 18 position: absolute; 19 width: 200px; 20 height: 100px; 21 left: calc(50% - 100px); 22 top: calc(50% - 50px); 23 transform-style: preserve-3d; /*这个属性的作用呢，是为了让浏览器，以3d的方式来渲染， 24 这个属性要添在父级身上，那么他的子元素，就能以3d的方式展示。 25 浏览器默认的渲染方式是2d的，我们这种3d结构，他显示不出来。 */ 26 } 27 .img{ 28 position: absolute; 29 width: 200px; 30 height: 100px; 31 } 32 .img:nth-of-type(1){ 33 background-image: url('./img/rotatePic/u=1036157886,1414018506&fm=26&gp=0.jpg'); 34 background-size: cover; 35 transform: translateZ(350px); 36 } 37 .img:nth-of-type(2){ 38 background-image: url('./img/rotatePic/u=1252635897,4048351284&fm=26&gp=0.jpg'); 39 background-size: cover; 40 transform: rotateY(45deg) translateZ(350px); 41 } 42 .img:nth-of-type(3){ 43 background-image: url('./img/rotatePic/u=1369094069,1969348532&fm=26&gp=0.jpg'); 44 background-size: cover; 45 transform: rotateY(90deg) translateZ(350px); 46 } 47 .img:nth-of-type(4){ 48 background-image: url('./img/rotatePic/u=1891680577,1135327170&fm=26&gp=0.jpg'); 49 background-size: cover; 50 transform: rotateY(135deg) translateZ(350px); 51 } 52 .img:nth-of-type(5){ 53 background-image: url('./img/rotatePic/u=215760299,4224999617&fm=26&gp=0.jpg'); 54 background-size: cover; 55 transform: rotateY(180deg) translateZ(350px); 56 } 57 .img:nth-of-type(6){ 58 background-image: url('./img/rotatePic/u=4188003421,389717180&fm=26&gp=0.jpg'); 59 background-size: cover; 60 transform: rotateY(225deg) translateZ(350px); 61 } 62 .img:nth-of-type(7){ 63 background-image: url('./img/rotatePic/下载 (1).jfif'); 64 background-size: cover; 65 transform: rotateY(270deg) translateZ(350px); 66 } 67 .img:nth-of-type(8){ 68 background-image: url('./img/rotatePic/下载 (2).jfif'); 69 background-size: cover; 70 transform: rotateY(315deg) translateZ(350px); 71 } 72 style> 73 head> 74 <body> 75 <div class="wra"> 76 <div class="img">div> 77 <div class="img">div> 78 <div class="img">div> 79 <div class="img">div> 80 <div class="img">div> 81 <div class="img">div> 82 <div class="img">div> 83 <div class="img">div> 84 div> 85 body> 86 html>
然后你就能看见这种效果啦。
然后，我们给父级 加上旋转的功能就OK了。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
*{
padding: 0;
margin: 0;
}
:root,body{
height: 100%;
perspective: 1000px;
}
@keyframes run{ /*这里我们要他旋转360度，那么就不用那么麻烦写关键帧了。开始0 结束360，然后循环即可*/
0%{
transform: rotateY(0deg);
}
100%{
transform: rotateY(360deg);
}
}
.wra{
position: absolute;
width: 200px;
height: 100px;
left: calc(50% - 100px);
top: calc(50% - 50px);
transform-style: preserve-3d;
animation: run 20s linear infinite; /*animation linear是匀速运动，infinite是无限循环*/
}
.img{
position: absolute;
width: 200px;
height: 100px;
}
.img:nth-of-type(1){
background-image: url('./img/rotatePic/u=1036157886,1414018506&fm=26&gp=0.jpg');
background-size: cover;
transform: translateZ(350px);
}
.img:nth-of-type(2){
background-image: url('./img/rotatePic/u=1252635897,4048351284&fm=26&gp=0.jpg');
background-size: cover;
transform: rotateY(45deg) translateZ(350px);
}
.img:nth-of-type(3){
background-image: url('./img/rotatePic/u=1369094069,1969348532&fm=26&gp=0.jpg');
background-size: cover;
transform: rotateY(90deg) translateZ(350px);
}
.img:nth-of-type(4){
background-image: url('./img/rotatePic/u=1891680577,1135327170&fm=26&gp=0.jpg');
background-size: cover;
transform: rotateY(135deg) translateZ(350px);
}
.img:nth-of-type(5){
background-image: url('./img/rotatePic/u=215760299,4224999617&fm=26&gp=0.jpg');
background-size: cover;
transform: rotateY(180deg) translateZ(350px);
}
.img:nth-of-type(6){
background-image: url('./img/rotatePic/u=4188003421,389717180&fm=26&gp=0.jpg');
background-size: cover;
transform: rotateY(225deg) translateZ(350px);
}
.img:nth-of-type(7){
background-image: url('./img/rotatePic/下载 (1).jfif');
background-size: cover;
transform: rotateY(270deg) translateZ(350px);
}
.img:nth-of-type(8){
background-image: url('./img/rotatePic/下载 (2).jfif');
background-size: cover;
transform: rotateY(315deg) translateZ(350px);
}
style>
head>
<body>
<div class="wra">
<div class="img">div>
<div class="img">div>
<div class="img">div>
<div class="img">div>
<div class="img">div>
<div class="img">div>
<div class="img">div>
<div class="img">div>
div>
body>
html>
最后，再加上一个小功能。像你想看哪里，鼠标就移动到 那里 即可，代码在93行开始。
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Documenttitle> 8 <style> 9 *{ 10 padding: 0; 11 margin: 0; 12 } 13 :root,body{ 14 height: 100%; 15 perspective: 1000px; 16 } 17 @keyframes run{ 18 0%{ 19 transform: rotateY(0deg); 20 } 21 100%{ 22 transform: rotateY(360deg); 23 } 24 } 25 .wra{ 26 position: absolute; 27 width: 200px; 28 height: 100px; 29 left: calc(50% - 100px); 30 top: calc(50% - 50px); 31 transform-style: preserve-3d; 32 animation: run 20s linear infinite; 33 } 34 .img{ 35 position: absolute; 36 width: 200px; 37 height: 100px; 38 } 39 .img:nth-of-type(1){ 40 background-image: url('./img/rotatePic/u=1036157886,1414018506&fm=26&gp=0.jpg'); 41 background-size: cover; 42 transform: translateZ(350px); 43 } 44 .img:nth-of-type(2){ 45 background-image: url('./img/rotatePic/u=1252635897,4048351284&fm=26&gp=0.jpg'); 46 background-size: cover; 47 transform: rotateY(45deg) translateZ(350px); 48 } 49 .img:nth-of-type(3){ 50 background-image: url('./img/rotatePic/u=1369094069,1969348532&fm=26&gp=0.jpg'); 51 background-size: cover; 52 transform: rotateY(90deg) translateZ(350px); 53 } 54 .img:nth-of-type(4){ 55 background-image: url('./img/rotatePic/u=1891680577,1135327170&fm=26&gp=0.jpg'); 56 background-size: cover; 57 transform: rotateY(135deg) translateZ(350px); 58 } 59 .img:nth-of-type(5){ 60 background-image: url('./img/rotatePic/u=215760299,4224999617&fm=26&gp=0.jpg'); 61 background-size: cover; 62 transform: rotateY(180deg) translateZ(350px); 63 } 64 .img:nth-of-type(6){ 65 background-image: url('./img/rotatePic/u=4188003421,389717180&fm=26&gp=0.jpg'); 66 background-size: cover; 67 transform: rotateY(225deg) translateZ(350px); 68 } 69 .img:nth-of-type(7){ 70 background-image: url('./img/rotatePic/下载 (1).jfif'); 71 background-size: cover; 72 transform: rotateY(270deg) translateZ(350px); 73 } 74 .img:nth-of-type(8){ 75 background-image: url('./img/rotatePic/下载 (2).jfif'); 76 background-size: cover; 77 transform: rotateY(315deg) translateZ(350px); 78 } 79 style> 80 head> 81 <body> 82 <div class="wra"> 83 <div class="img">div> 84 <div class="img">div> 85 <div class="img">div> 86 <div class="img">div> 87 <div class="img">div> 88 <div class="img">div> 89 <div class="img">div> 90 <div class="img">div> 91 div> 92 <script> 93 document.body.onmousemove = function(e){ 94 this.style.perspectiveOrigin = e.pageX + 'px ' + e.pageY +'px'; 95 } 96 script> 97 body> 98 html>
看一下效果好吧。