前端特效之520表白神器-旋转照片墙

今天教大家一手表白神器，单身的程序员们感觉学起来，很简单。
制作步骤：

1. 新建代码目录，新建文件index.html，将以下代码拷贝到文件中

2. 新建文件夹image，找12张图片放进去，修改imgae标签对应的src属性，酷炫的照片旋转就完成了。

3. 代码效果如下，双击index.html或者直接拖到浏览器中打开即可

  1 <!doctype html>
  2 <html>
  3 <head>
  4            <meta charset="utf-8">
  5            <title>表白神器-照片特效</title>
  6            <style>
  7                      *{
  8             padding:0;
  9             margin:0;
 10         }
 11         #react{
 12             width: 200px;
 13             height:200px;
 14             margin: 200px auto;
 15             transform-style:preserve-3d;
 16             animation:rotate 20s infinite;
 17             animation-timing-function: linear;
 18         }
 19         #react div{
 20             position:absolute;
 21             transition: all .4s;
 22         }
 23         div .out_pic{
 24             width:200px;
 25             height:200px;
 26             opacity:0.9;
 27         }
 28         div .in_pic{
 29             width:100px;
 30             height:100px;
 31         }
 32         #react span{
 33             display:block;
 34             position:absolute;
 35             width:100px;
 36             height:100px;
 37             top:50px;
 38             left:50px;
 39         }
 40         @keyframes rotate{
 41             from{transform: rotateX(0deg) rotateY(0deg);}
 42             to{transform: rotateX(360deg) rotateY(360deg);}
 43         }
 44         .out_frount{
 45             transform:translateZ(100px);
 46         }
 47         .out_back{
 48             transform:translateZ(-100px);
 49         }
 50         .out_left{
 51             transform:rotateY(90deg) translateZ(100px);
 52         }
 53         .out_right{
 54             transform: rotateY(-90deg) translateZ(100px);
 55         }
 56         .out_top{
 57             transform:rotateX(90deg) translateZ(100px);
 58         }
 59         .out_bottom{
 60             transform: rotateX(-90deg) translateZ(100px);
 61         }
 62         .in_frount{
 63             transform:translateZ(50px);
 64         }
 65         .in_back{
 66             transform:translateZ(-50px);
 67         }
 68         .in_left{
 69             transform:rotateY(90deg) translateZ(50px);
 70         }
 71         .in_right{
 72             transform: rotateY(-90deg) translateZ(50px);
 73         }
 74         .in_top{
 75             transform:rotateX(90deg) translateZ(50px);
 76         }
 77         .in_bottom{
 78             transform: rotateX(-90deg) translateZ(50px);
 79         }
 80         #react:hover .out_frount{
 81             transform:translateZ(200px);
 82         }
 83         #react:hover .out_back{
 84             transform:translateZ(-200px);
 85         }
 86         #react:hover .out_left{
 87             transform:rotateY(90deg) translateZ(200px);
 88         }
 89         #react:hover .out_right{
 90             transform: rotateY(-90deg) translateZ(200px);
 91         }
 92         #react:hover .out_top{
 93             transform:rotateX(90deg) translateZ(200px);
 94         }
 95         #react:hover .out_bottom{
 96             transform: rotateX(-90deg) translateZ(200px);
 97         }
 98          @charset &quot;utf-8&quot;;
 99         /* CSS Document */  
100           </style>
101 </head>
102 <body>
103 <div id="react">
104     <div class="out_frount">
105        < image src="image/1.jpg" class="out_pic">
106     </div>
107     <div class="out_backt">
108        < image src="image/1.jpg" class="out_pic">
109     </div>
110     <div class="out_left">
111        < image src="image/1.jpg" class="out_pic">
112     </div>
113     <div class="out_right">
114        < image src="image/1.jpg" class="out_pic">
115     </div>
116     <div class="out_top">
117        < image src="image/1.jpg" class="out_pic">
118     </div>
119     <div class="out_bottom">
120        < image src="image/1.jpg" class="out_pic">
121     </div>
122     <span class="out_frount">
123        < image src="image/1.jpg" class="out_pic">
124     </span>
125     <span class="out_back">
126        < image src="image/1.jpg" class="out_pic">
127     </span>
128     <span class="out_left">
129        < image src="image/1.jpg" class="out_pic">
130     </span>
131     <span class="out_right">
132        < image src="image/1.jpg" class="out_pic">
133     </span>
134     <span class="out_top">
135        < image src="image/1.jpg" class="out_pic">
136     </span>
137     <span class="out_bottom">
138        < image src="image/1.jpg" class="out_pic">
139     </span>
140 </div>
141 </body>
142 </html>

以上就是前端特效之表白神器-旋转照片墙的详细内容。（拼多多培训）

posted @ 2021-07-30 15:50  齐论拼多多  阅读(824)  评论(0)    收藏  举报