..._3d正方体旋转相册代码">
devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

3d正方体旋转相册代码_用HTML+CSS代码制作3D旋转相册

作者：花生_TL007 | 2024-02-15 20:34:10

赞

踩

3d正方体旋转相册代码

对于很多小伙伴给诺亚的留言问题，诺亚这里详细总结一下

一、我的项目文件目录

图片全部存放在images文件夹下，你把自己需要显示的图片放在images文件夹下就可以了，一共是11张图片，一张背景图
我的图片命名为1.jpg,2.jpg……，可以自己更改图片名字，代码里也需要修改为自己的图片名字哦

e696376e19708621656a92a1182d2c6d.png

二、index文件代码如下：

<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>

三、运行效果图：

397d11544e422bd8e1c1e6cb914ea75a.png

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/86748
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号