原创

费用

温馨提示：
本文最后更新于 2025年06月18日，已超过 359 天没有更新。若文章内的图片失效（无法正常加载），请留言反馈或直接联系我。

 



html 3D立体动画照片旋转

<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 3D立体动画照片旋转</title>
        <meta charset="utf-8" />
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <style text="text/css" >
            /*实现立体效果*/
            .img {
                width: 50px;
                height: 50px;
                margin: 0 auto;
                transform-style: preserve-3d;
                /*设置动画播放样式:动画对象 播放速度 时间 播放次数*/
                animation: rotate linear 20s infinite;
            }
            /*实现动画效果*/
            @-webkit-keyframes rotate {                /*sofari chrome*/
                from {
                    transform: rotateX(0deg) rotateY(0deg);
                }
                to {
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
            /*图片样式*/
            .pic{
                width: 200px;
                height: 200px;
                transform: rotateY(0deg) translateZ(100px);
            }
        </style>
        <style  type="text/css">
            /*最外层容器样式*/
            .wrap {
                width: 100px;
                height: 100px;
                margin: 150px;
                position: relative;
            }

            /*得到立方体效果*/
            .cube {
                width: 50px;
                height: 50px;
                margin: 0 auto;
                transform-style: preserve-3d;
                /*设置动画播放样式:动画对象 播放速度 时间 播放次数*/
                animation: rotate linear 20s infinite;
            }

            /*动画旋转的方式*/
            /*得到动画效果*/
            @-moz-keyframes rotate {                     /*firefox*/
                from {
                    transform: rotateX(0deg) rotateY(0deg);
                }
                to {
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
            @-webkit-keyframes rotate {                /*sofari chrome*/
                from {
                    transform: rotateX(0deg) rotateY(0deg);
                }
                to {
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
            @-o-keyframes rotate {                    /*opera*/
                from {
                    transform: rotateX(0deg) rotateY(0deg);
                }
                to {
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
            /*每张图片的样式*/
            .cube div {
                position: absolute;
                width: 200px;
                height: 200px;
                opacity: 0.8;
                /*过渡效果*/
                transition: all .4s;
            }

            /*定义所有图片样式*/
            .pic {
                width: 200px;
                height: 200px;
            }

            .cube .out_front {
                transform: rotateY(0deg) translateZ(100px);
            }

            .cube .out_back {
                transform: translateZ(-100px) rotateY(180deg);
            }

            .cube .out_left {
                transform: rotateY(-90deg) translateZ(100px);
            }

            .cube .out_right {
                transform: rotateY(90deg) translateZ(100px);
            }

            .cube .out_top {
                transform: rotateX(90deg) translateZ(100px);
            }

            .cube .out_bottom {
                transform: rotateX(-90deg) translateZ(100px);
            }

            /*定义小正方体样式*/
            .cube span {
                display: block;
                width: 100px;
                height: 100px;
                position: absolute;
                top: 50px;
                left: 50px;
            }

            .cube .in_pic {
                width: 100px;
                height: 100px;
            }

            .cube .in_front {
                transform: rotateY(0deg) translateZ(50px);
            }

            .cube .in_back {
                transform: translateZ(-50px) rotateY(180deg);
            }

            .cube .in_left {
                transform: rotateY(-90deg) translateZ(50px);
            }

            .cube .in_right {
                transform: rotateY(90deg) translateZ(50px);
            }

            .cube .in_top {
                transform: rotateX(90deg) translateZ(50px);
            }

            .cube .in_bottom {
                transform: rotateX(-90deg) translateZ(50px);
            }

            /*鼠标移入后样式*/
            .cube:hover .out_front {
                transform: rotateY(0deg) translateZ(200px);
            }

            .cube:hover .out_back {
                transform: translateZ(-200px) rotateY(180deg);
            }

            .cube:hover .out_left {
                transform: rotateY(-90deg) translateZ(200px);
            }

            .cube:hover .out_right {
                transform: rotateY(90deg) translateZ(200px);
            }

            .cube:hover .out_top {
                transform: rotateX(90deg) translateZ(200px);
            }

            .cube:hover .out_bottom {
                transform: rotateX(-90deg) translateZ(200px);
            }
        </style>
        
        <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <div class="wrap">
            <!--部署内外层图片-->
            <div class="cube">
                <!--前面图片 -->
                <div class="out_front">
                    <img src="https://i.loli.net/2018/10/04/5bb5f270969f2.jpeg" class="pic"/>
                </div>
                <!--后面图片 -->
                <div class="out_back">
                    <img src="https://i.loli.net/2018/10/04/5bb5f23ce7f1e.jpg" class="pic"/>
                </div>
                <!--左面图片 -->
                <div class="out_left">
                    <img src="https://i.loli.net/2018/10/04/5bb5f26e13b28.jpg" class="pic"/>
                </div>
                <!--右面图片 -->
                <div class="out_right">
                    <img src="https://i.loli.net/2018/10/07/5bb9b1ca97948.jpg" class="pic"/>
                </div>
                <!--上面图片 -->
                <div class="out_top">
                    <img src="https://i.loli.net/2018/10/04/5bb5f2725c5c7.jpg" class="pic"/>
                </div>
                <!--下面图片 -->
                <div class="out_bottom">
                    <img src="https://i.loli.net/2018/10/04/5bb5f27af2e28.jpg" class="pic"/>
                </div>
                <!--小正方体 --> 
                <span class="in_front">
                    <img src="https://i.loli.net/2018/10/07/5bb9b2e441d7a.jpg" class="in_pic"/>
                </span>
                
                <span class="in_back">
                    <img src="https://i.loli.net/2018/10/07/5bb9b2e712b3f.jpg" class="in_pic"/>
                </span>
                
                <span class="in_left">
                    <img src="https://i.loli.net/2018/10/07/5bb9b2e86ad25.jpg" class="in_pic"/>
                </span>
                
                <span class="in_right">
                    <img src="https://i.loli.net/2018/10/07/5bb9b2eaba148.jpg" class="in_pic"/>
                </span>
                
                <span class="in_top">
                    <img src="https://i.loli.net/2018/10/07/5bb9b2ebe5bd9.jpg" class="in_pic"/>
                </span>
                <span class="in_bottom">
                    <img src="https://i.loli.net/2018/10/07/5bb9b2ed867be.jpg" class="in_pic"/>
                </span>

            </div>
          
        </div>
    </body>

</html>

VUE3  格式

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<template>
  <body>
  <div class="wrap" style="width: 600px;height: 600px;margin: 60px auto">
    <!--部署内外层图片-->
    <div class="cube">
      <!--前面图片 -->
      <div class="out_front">
        <img src="https://i.loli.net/2018/10/04/5bb5f270969f2.jpeg" class="pic"/>
      </div>
      <!--后面图片 -->
      <div class="out_back">
        <img src="https://i.loli.net/2018/10/04/5bb5f23ce7f1e.jpg" class="pic"/>
      </div>
      <!--左面图片 -->
      <div class="out_left">
        <img src="https://i.loli.net/2018/10/04/5bb5f26e13b28.jpg" class="pic"/>
      </div>
      <!--右面图片 -->
      <div class="out_right">
        <img src="https://i.loli.net/2018/10/07/5bb9b1ca97948.jpg" class="pic"/>
      </div>
      <!--上面图片 -->
      <div class="out_top">
        <img src="https://i.loli.net/2018/10/04/5bb5f2725c5c7.jpg" class="pic"/>
      </div>
      <!--下面图片 -->
      <div class="out_bottom">
        <img src="https://i.loli.net/2018/10/04/5bb5f27af2e28.jpg" class="pic"/>
      </div>
      <!--小正方体 -->
      <span class="in_front">
                    <img src="https://i.loli.net/2018/10/07/5bb9b2e441d7a.jpg" class="in_pic"/>
                </span>

      <span class="in_back">
                    <img src="https://i.loli.net/2018/10/07/5bb9b2e712b3f.jpg" class="in_pic"/>
                </span>

      <span class="in_left">
                    <img src="https://i.loli.net/2018/10/07/5bb9b2e86ad25.jpg" class="in_pic"/>
                </span>

      <span class="in_right">
                    <img src="https://i.loli.net/2018/10/07/5bb9b2eaba148.jpg" class="in_pic"/>
                </span>

      <span class="in_top">
                    <img src="https://i.loli.net/2018/10/07/5bb9b2ebe5bd9.jpg" class="in_pic"/>
                </span>
      <span class="in_bottom">
                    <img src="https://i.loli.net/2018/10/07/5bb9b2ed867be.jpg" class="in_pic"/>
                </span>

    </div>

  </div>
  </body>
</template>

<style scoped>
/*最外层容器样式*/
.wrap {
  width: 100px;
  height: 100px;
  margin: 150px;
  position: relative;
}

/*得到立方体效果*/
.cube {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  transform-style: preserve-3d;
  /*设置动画播放样式:动画对象 播放速度 时间 播放次数*/
  animation: rotate linear 20s infinite;
}

/*动画旋转的方式*/
/*得到动画效果*/
@-moz-keyframes rotate { /*firefox*/
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

@-webkit-keyframes rotate { /*sofari chrome*/
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

@-o-keyframes rotate { /*opera*/
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

/*每张图片的样式*/
.cube div {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.8;
  /*过渡效果*/
  transition: all .4s;
}

/*定义所有图片样式*/
.pic {
  width: 200px;
  height: 200px;
}

.cube .out_front {
  transform: rotateY(0deg) translateZ(100px);
}

.cube .out_back {
  transform: translateZ(-100px) rotateY(180deg);
}

.cube .out_left {
  transform: rotateY(-90deg) translateZ(100px);
}

.cube .out_right {
  transform: rotateY(90deg) translateZ(100px);
}

.cube .out_top {
  transform: rotateX(90deg) translateZ(100px);
}

.cube .out_bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

/*定义小正方体样式*/
.cube span {
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 50px;
}

.cube .in_pic {
  width: 100px;
  height: 100px;
}

.cube .in_front {
  transform: rotateY(0deg) translateZ(50px);
}

.cube .in_back {
  transform: translateZ(-50px) rotateY(180deg);
}

.cube .in_left {
  transform: rotateY(-90deg) translateZ(50px);
}

.cube .in_right {
  transform: rotateY(90deg) translateZ(50px);
}

.cube .in_top {
  transform: rotateX(90deg) translateZ(50px);
}

.cube .in_bottom {
  transform: rotateX(-90deg) translateZ(50px);
}

/*鼠标移入后样式*/
.cube:hover .out_front {
  transform: rotateY(0deg) translateZ(200px);
}

.cube:hover .out_back {
  transform: translateZ(-200px) rotateY(180deg);
}

.cube:hover .out_left {
  transform: rotateY(-90deg) translateZ(200px);
}

.cube:hover .out_right {
  transform: rotateY(90deg) translateZ(200px);
}

.cube:hover .out_top {
  transform: rotateX(90deg) translateZ(200px);
}

.cube:hover .out_bottom {
  transform: rotateX(-90deg) translateZ(200px);
}


/*实现立体效果*/
.img {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  transform-style: preserve-3d;
  /*设置动画播放样式:动画对象 播放速度 时间 播放次数*/
  animation: rotate linear 20s infinite;
}

/*实现动画效果*/
@-webkit-keyframes rotate { /*sofari chrome*/
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

/*图片样式*/
.pic {
  width: 200px;
  height: 200px;
  transform: rotateY(0deg) translateZ(100px);
}

</style>


横向照片展示 html


 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>3d</title>
	</head>
	<style type="text/css">
		*{
			margin:0;
			padding: 0;
		}
		/*html,*/body{
			height: 100%;
			background: url(bg.jpg) no-repeat;
		}
		#box{
			background: url(pic.png) no-repeat;
			width:300px;
			height:200px;
			margin:180px auto;
			transform-style:preserve-3d ;/*子元素旋转父元素加上   为子元素声明3D空间*/
			position: relative;
			transform-origin: center;/*设置旋转中心点*/
			animation: move 14s linear infinite;
		}
		#box img {
			position: absolute;
			width: 250px;
			height: 300px;
			
		}
		@keyframes move{
			0%{transform: rotateY(0deg) rotateX(0deg) ;}
			25%{transform: rotateY(180deg) rotateX(20deg) ;}
			50%{transform: rotateY(360deg) rotateX(0deg) ;}
			75%{transform: rotateY(540deg) rotateX(-20deg) ;}
			100%{transform: rotateY(720deg) rotateX(0deg) ;}
		}
		/*#box img:nth-child(1){
			transform: rotateY(360deg);
		}*/
	</style>
	<body>
		<div id="box">
			<img src="https://i.loli.net/2018/10/04/5bb5f270969f2.jpeg"/>
			<img src="https://i.loli.net/2018/10/04/5bb5f23ce7f1e.jpg"/>
			<img src="https://i.loli.net/2018/10/04/5bb5f26e13b28.jpg"/>
			<img src="https://i.loli.net/2018/10/07/5bb9b1ca97948.jpg"/>
			<img src="https://i.loli.net/2018/10/04/5bb5f27af2e28.jpg"/>
			<img src="https://i.loli.net/2018/10/07/5bb9b2e441d7a.jpg"/>
			<img src="https://i.loli.net/2018/10/07/5bb9b2e712b3f.jpg"/>
			<img src="https://i.loli.net/2018/10/07/5bb9b2e86ad25.jpg"/>
			<img src="https://i.loli.net/2018/10/07/5bb9b2eaba148.jpg"/>
			<img src="https://i.loli.net/2018/10/07/5bb9b2ebe5bd9.jpg"/>
			
			
		</div>
		<embed src="sss.mp3" width="0px" height="0px" type="audio/mpeg" loop="true" autostart="true">		
	</body>
	<script type="text/javascript">
		var oimg=box.getElementsByTagName("img");
		for(var i=0;i<oimg.length;i++){
			oimg[i].style.cssText="transform:rotateY("+i*36+"deg) translateZ(500px)";
		}
		</script>
</html>

效果图

 
正文到此结束
所属分类：后端技术
热门推荐
相关文章
说给你听

本文目录
    标签云
    Linux Java Spring Spring Boot 其他 文学 GJ docker SpringCloud
    1. 暂无相关文章
    网站信息
    • 文章总数：144 篇
    • 标签总数：9 个
    • 分类总数：7 个
    • 留言数量：0 条
    • 在线人数：1人
    • 运行天数：500天
    • 最后更新：2025年01月25日01点
    • 系统版本：v2.3.6