css3实现一个有趣的海贼王人物3d旋转相册

左手的ㄟ右手 2021-12-10 17:19 349阅读 0赞

主要用到了CSS3中的   transform-style: preserve-3d;   filter滤镜效果；     nth-child选择器， figure标签；

transform 中的rotate（旋转）、translate（移动）等。

html代码：

<h2>ONE PIECE 3D Images Gallery</h2>
            <div class="container">
                 <div id="rotatephoto">
                    <figure><img src="img/rotate1.jpg" alt=""></figure>
                    <figure><img src="img/rotate2.jpg" alt=""></figure>
                    <figure><img src="img/rotate3.jpg" alt=""></figure>
                    <figure><img src="img/rotate4.jpg" alt=""></figure>
                    <figure><img src="img/rotate5.jpg" alt=""></figure>
                    <figure><img src="img/rotate6.jpg" alt=""></figure>
                    <figure><img src="img/rotate7.jpg" alt=""></figure>
                    <figure><img src="img/rotate8.jpg" alt=""></figure>
                    <figure><img src="img/rotate9.jpg" alt=""></figure>
    
                 </div>
            </div>

css代码：

![gif.latex][]

<style type="text/css">
              *{   margin: 0;   padding: 0;   outline: none;    border: none;   box-sizing: border-box; }
              html,body{     min-height: 100%;   }
              body{ background-image: radial-gradient(mintcream 0%, lightgray 100%);  }
              h2{
                  display: table;
                  margin: 5% auto 0;
                  text-transform: uppercase;            /* uppercase定义只有大写字母  */
                  font-family: "Times New Roman",Georgia,Serif;
                  font-size: 3em;
                  font-weight: 500;
                  text-shadow: 0 1px white, 0 3px blue;
              }
              .container{
                  width: 360px;
                  height: 250px;
                  position: relative;
                  margin: 5% auto;
                  perspective: 1000;
              }
              #rotatephoto{
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  transform-style: preserve-3d;
                  animation: rotation 20s infinite linear;
              }
              #rotatephoto:hover{
                  animation-play-state: paused;
              }
              #rotatephoto figure{
                  display: block;
                  position: absolute;
                  width: 350px;
                  height: 188px;
                  left: 10px;
                  top: 10px;
                  background: black;
                  overflow: hidden;
                  border: 5px solid black;
              }
              #rotatephoto figure:nth-child(1){  transform:  rotateY(0deg) translateZ(500px);}
              #rotatephoto figure:nth-child(2){  transform:  rotateY(40deg) translateZ(500px);}
              #rotatephoto figure:nth-child(3){  transform:  rotateY(80deg) translateZ(500px);}
              #rotatephoto figure:nth-child(4){  transform:  rotateY(120deg) translateZ(500px);}
              #rotatephoto figure:nth-child(5){  transform:  rotateY(160deg) translateZ(500px);}
              #rotatephoto figure:nth-child(6){  transform:  rotateY(200deg) translateZ(500px);}
              #rotatephoto figure:nth-child(7){  transform:  rotateY(240deg) translateZ(500px);}
              #rotatephoto figure:nth-child(8){  transform:  rotateY(280deg) translateZ(500px);}
              #rotatephoto figure:nth-child(9){  transform:  rotateY(320deg) translateZ(500px);}
    
              img{
                  -webkit-filter: grayscale(1);     /* filter滤镜 */
                  cursor: pointer;
                  transition: all 0.8s ease;
              }
              img:hover{
                  -webkit-filter: grayscale(0);
                  transform: scale(1.3, 1.3);       /* scale缩放 */
              }
    
              @keyframes rotation{
                  0%{
                      transform: rotateY(0deg);
                  }
                  100%{
                      transform: rotateY(360deg);
                  }
              }
    
        </style>

附上效果动态图：

![20190711172303557.gif][]

[gif.latex]: https://private.codecogs.com/gif.latex?
[20190711172303557.gif]: /images/20211210/554aad4bc1e041698267d7bf6b64552a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，349人围观）

还没有评论，来说两句吧...

相关阅读

相关 3D旋转（CSS3）

3D旋转（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta cha

- 日理万妓/ 2023年10月03日 13:39/ 0 赞/ 36 阅读

相关【3D旋转相册效果实现】

最终效果图展示: ![在这里插入图片描述][20190929222316567.gif] HTML部分 1.首先在html中写上名为 perspective 的di

缺乏、安全感/ 2023年08月17日 16:55/ 0 赞/ 173 阅读

相关 3D旋转相册

3D旋转相册 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

亦凉/ 2022年12月16日 13:02/ 0 赞/ 233 阅读

相关使用CSS3绘制一个简易的3D相册

使用CSS3绘制一个简易的3D相册，先来看一下完成的静态效果图，： ![3D相册][3D] [点击查看完成效果][Link 1] 关于CSS3中的transform3D

短命女/ 2022年07月14日 08:26/ 0 赞/ 213 阅读

相关 css3 实现正方体3D旋转

源代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

亦凉/ 2022年06月04日 00:06/ 0 赞/ 336 阅读

相关 css 实现3d旋转

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

柔光的暖阳◎/ 2022年05月28日 12:20/ 0 赞/ 338 阅读

相关 CSS3通过3D变换立体旋转相册

图片镇楼： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

川长思鸟来/ 2022年04月14日 02:57/ 0 赞/ 392 阅读

相关 css3实现一个有趣的海贼王人物3d旋转相册

主要用到了CSS3中的 transform-style: preserve-3d; filter滤镜效果； nth-child选择器， figure标签；

左手的ㄟ右手/ 2021年12月10日 17:19/ 0 赞/ 350 阅读

相关 css动画 3d旋转相册

思路: 重叠四个图片,然后设置行变点在中心的z轴往后的方向上,分别设置其他图片绕y轴的旋转角度,设置父容器的行变中心点和图片一样并设置透视和3d属

待我称王封你为后i/ 2021年07月25日 02:37/ 0 赞/ 549 阅读

相关 html+css+js实现3D相册

html+css+js实现3D相册使用html+css+js实现3D相册，快来上传的照片吧效果图：

灰太狼/ 2020年06月07日 15:50/ 0 赞/ 2092 阅读