3D动态图片展示

最新推荐文章于 2024-11-07 15:25:50 发布

野猪麦兜

最新推荐文章于 2024-11-07 15:25:50 发布

阅读量734

点赞数

分类专栏：其他文章标签： css javascript 前端 html

本文链接：https://blog.csdn.net/qq_58242432/article/details/122357646

版权

其他专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS和JavaScript实现在页面上展示的立方体，通过逐层旋转各个面，创造出视觉上的动态效果。通过CSS控制样式，结合JavaScript的定时器和事件监听，实现了鼠标悬停时的交互变化。

摘要由CSDN通过智能技术生成

为方便阅读，js与css都采用内联。

实现效果（裸图）：

实现效果（上图后）：

项目目录：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			cursor: pointer;
			list-style: none;
			margin: 40vh 40vw;
		}
		.list li{
			width: 200px;
			height: 200px;
			position: relative;
			text-align:center;
			line-height: 200px;
			transition: all 1s;
			transform-style: preserve-3d;
			transform:perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		}
		div{
			width: 200px;
			height: 200px;
		}
		.l1 div{
			position: absolute;
			top: 0px;
			left: 0px;
		}
		.l1 div:first-child{
			background: red;
			background: url(img/a.jpg)no-repeat;
			background-size:200px 200px;
			transform:translateZ(100px);
		}
		.l1 div:nth-child(2){
			background: aqua;
			background: url(img/b.jpg)no-repeat;
			background-size:200px 200px;
			transform: rotateX(90deg) translateZ(100px);
		}
		.l1 div:nth-child(3){
			background: yellow;
			background: url(img/c.jpg)no-repeat;
			background-size:200px 200px;
			transform: rotateY(90deg)  translateZ(100px);
		}
		.l1 div:nth-child(4){
			background: greenyellow;
			background: url(img/d.jpg)no-repeat;
			background-size:200px 200px;
			transform:rotateY(-90deg)   translateZ(100px);
			
		}
		.l1 div:nth-child(5){
			background: peru;
			background: url(img/e.jpg)no-repeat;
			background-size:200px 200px;
			transform: rotateX(-90deg)  translateZ(100px);
		}
		.l1 div:nth-child(6){
			background:pink;
			background: url(img/f.jpg)no-repeat;
			background-size:200px 200px;
			transform:translateZ(-100px);
		}
		.l2{
			margin-top: -200px;
		}
		.l2 div{
			position: absolute;
			top: 0px;
			left: 0px;
		}
		.l2 div:first-child{
			background: red;
			background: url(img/a.jpg)no-repeat;
			background-size:200px 200px;
			transform:translateZ(100px);
		}
		.l2 div:nth-child(2){
			background: aqua;
			background: url(img/b.jpg)no-repeat;
			background-size:200px 200px;
			transform: rotateX(90deg) translateZ(100px);
		}
		.l2 div:nth-child(3){
			background: yellow;
			background: url(img/c.jpg)no-repeat;
			background-size:200px 200px;
			transform: rotateY(90deg)  translateZ(100px);
		}
		.l2 div:nth-child(4){
			background: greenyellow;
			background: url(img/d.jpg)no-repeat;
			background-size:200px 200px;
			transform:rotateY(-90deg)   translateZ(100px);
			
		}
		.l2 div:nth-child(5){
			background: peru;
			background: url(img/e.jpg)no-repeat;
			background-size:200px 200px;
			transform: rotateX(-90deg)  translateZ(100px);
		}
		.l2 div:nth-child(6){
			background:pink;
			background: url(img/f.jpg)no-repeat;
			background-size:200px 200px;
			transform:translateZ(-100px);
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var l1=document.querySelector(".l1");
			var l2=document.querySelector(".l2");
			var div=l2.querySelectorAll("div");
			var sb=0;
			var nt=360;
			var time=setInterval(function(){
					sb++;
					l1.style.transform="perspective(1000px) rotateX("+nt+"deg) rotateY("+sb+"deg) rotateZ("+sb+"deg)";
					l2.style.transform="perspective(1000px) rotateX("+nt+"deg) rotateY("+sb+"deg) rotateZ("+sb+"deg)";
						
			},10)
			l2.onmouseenter=function(){
				div[0].style.transform="translateZ(300px)";
				div[1].style.transform="rotateX(90deg) translateZ(300px)";
				div[2].style.transform="rotateY(90deg) translateZ(300px)";
				div[3].style.transform="rotateY(-90deg)translateZ(300px)";
				div[4].style.transform="rotateX(-90deg)  translateZ(300px)";
				div[5].style.transform="translateZ(-300px)";
			}
			l2.onmouseleave=function(){
				div[0].style.transform="translateZ(100px)";
				div[1].style.transform="rotateX(90deg) translateZ(100px)";
				div[2].style.transform="rotateY(90deg) translateZ(100px)";
				div[3].style.transform="rotateY(-90deg)translateZ(100px)";
				div[4].style.transform="rotateX(-90deg)  translateZ(100px)";
				div[5].style.transform="translateZ(-100px)";
			}
		}
	</script>
	<body>
		<ul class="list">
			<li class="l1">
				<div>a</div>
				<div>b</div>
				<div>c</div>
				<div>d</div>
				<div>e</div>
				<div>f</div>
			</li>
			<li class="l2">
				<div>a</div>
				<div>b</div>
				<div>c</div>
				<div>d</div>
				<div>e</div>
				<div>f</div>
			</li>
		</ul>
	</body>
</html>