html制作照片墙实现旋转效果

宁醉小白

已于 2022-04-21 23:09:45 修改

阅读量3k

点赞数 5

文章标签： html

于 2022-04-21 23:08:48 首次发布

本文链接：https://blog.csdn.net/qq_45222550/article/details/124334351

版权

 
<!DOCTYPE html>
<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("imgs/2.png");}  '''这一张是背景图片，注意照片的格式'''
        #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="imgs/1.jpg">
    <img src="imgs/2.jpg">
    <img src="imgs/3.jpg">
    <img src="imgs/4.jpg">
    <img src="imgs/5.jpg">
    <img src="imgs/6.jpg">
    <img src="imgs/7.jpg">
    <img src="imgs/8.jpg">
    <img src="imgs/9.jpg">
    <img src="imgs/10.jpg">
    <img src="imgs/11.jpg">
    <img src="imgs/12.jpg">
    <img src="imgs/13.jpg">
    <img src="imgs/14.jpg">
    <img src="imgs/15.jpg">
    <img src="imgs/16.jpg">
    <img src="imgs/17.jpg">
    <img src="imgs/18.jpg">
    <img src="imgs/19.jpg">
</div>
</body>

宁醉小白

关注

5
点赞
踩
33

收藏

觉得还不错? 一键收藏
3
评论
html制作照片墙实现旋转效果

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>3D照片旋转效果</title> <style type="text/css"> *{padding: 0; margin: 0;} body,html{height:100%;} bo...
复制链接

扫一扫