码迷,mamicode.com
首页 > 其他好文 > 详细

利用perspective 和 transform 里面的几个参数来实现旋转照片墙

时间:2019-08-03 01:04:53      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:照片   style   16px   body   move   port   ice   lis   roo   

旋转照片墙

首先,来看下,是什么效果吧,上效果图 ↓

技术图片

 

其实这个东西,很容易制作,先说下思路, 把照片都给叠在一起,然后 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>Document</title>
    <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>Document</title>
    <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>Document</title>
 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>Document</title>
    <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>Document</title>
 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>

 

看一下效果好吧。

技术图片

 

 

 

 

 

 

利用perspective 和 transform 里面的几个参数来实现旋转照片墙

标签:照片   style   16px   body   move   port   ice   lis   roo   

原文地址:https://www.cnblogs.com/yanggeng/p/11291755.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!