使用CSS3、Jquery实现动态魔方

最新推荐文章于 2023-05-07 15:44:24 发布

shmilyhq

最新推荐文章于 2023-05-07 15:44:24 发布

阅读量228

点赞数

本文链接：https://blog.csdn.net/shmilyhq/article/details/106009322

版权

HTML5 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

Jquery

6 篇文章 0 订阅

订阅专栏

CSS3

3 篇文章 0 订阅

订阅专栏

1、HTML代码块

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<div class="container">
			<div class="box">
				<div class="box-page top"></div>
				<div class="box-page bottom"></div>
				<div class="box-page left"></div>
				<div class="box-page right"></div>
				<div class="box-page before"></div>
				<div class="box-page after"></div>
			</div>
		</div>

2、css代码块

* {
				margin: 0;
				padding: 0;
			}
			
			.container {
				width: 300px;
				height: 300px;
				/*border: 1px solid #000;*/
				margin: 150px auto;
			}
			
			.box {
				width: 300px;
				height: 300px;
				transform-style: preserve-3d;
				position: relative;
				/*transform:  rotateX(45deg) rotateY(45deg);*/
				animation: ro 4s linear infinite;
			}
			
			@keyframes ro {
				0% {
					transform: rotateX(0deg) rotateY(0deg);
				}
				100% {
					transform: rotateX(360deg) rotateY(360deg);
				}
			}
			
			.box-page {
				width: 300px;
				height: 300px;
				transform-style: preserve-3d;
				box-sizing: border-box;
				/*位置初始化*/
				position: absolute;
			}
			
			.top {
				transform: translateZ(150px);
			}
			
			.bottom {
				transform: translateZ(-150px) rotateX(180deg);
			}
			
			.left {
				transform: translateX(-150px) rotateY(-90deg);
			}
			
			.right {
				transform: translateX(150px) rotateY(90deg);
			}
			
			.before {
				transform: translateY(150px) rotateX(-90deg);
			}
			
			.after {
				transform: translateY(-150px) rotateX(90deg);
			}
			.box-page div:first-child,.box-page div:nth-child(3),.box-page div:nth-child(5),.box-page div:nth-child(7),.box-page div:nth-child(9){
		    animation: myframesy 4s ease-in;
		}



		.box-page div:nth-child(2),.box-page div:nth-child(4),.box-page div:nth-child(6),.box-page div:nth-child(8){
			
		    animation: myframesx 4s ease-in 0.5s;
		}
			@keyframes myframesy {
				0% {
					transform: translateY(0px) scale(1) rotateY(0deg);
				}
				20% {
					transform: translateY(300px) scale(0) rotateY(360deg);
				}
				90% {
					transform: translateY(300px) scale(0) rotateY(720deg);
				}
				100% {
					transform: translateY(0px) scale(1) rotateY(0deg);
				}
			}
			@keyframes myframesx {
				0% {
					transform: translateX(0px) scale(1) rotateX(0deg);
				}
				20% {
					transform: translateX(300px) scale(0) rotateX(360deg);
				}
				90% {
					transform: translateX(300px) scale(0) rotateX(720deg);
				}
				100% {
					transform: translateX(0px) scale(1) rotateX(0deg);
				}
			}

3、Jquery代码块

var itemPage = document.querySelectorAll(".box-page");
			//遍历六个面中的每一个面
			for(var i = 0; i < itemPage.length; i++) {
				//外层循环行
				for(var j = 0; j < 3; j++) {
					//内层循环遍历
					for(var k = 0; k < 3; k++) {

						//创建魔方元素
						var divs = document.createElement("div");
						divs.style.cssText = "width:100px;height:100px;border:2px solid #fff;box-sizing:border-box;position:absolute;background-image: url(img/a" + i + ".jpg);background-size:300px 300px;";
						itemPage[i].appendChild(divs);
						divs.style.left = k * 100 + "px";
						divs.style.top = j * 100 + "px";
						divs.style.backgroundPositionX = -k * 100 + "px";
						divs.style.backgroundPositionY = -j * 100 + "px";
					}
				}
			}

效果图如下：
在这里插入图片描述

shmilyhq

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用CSS3、Jquery实现动态魔方

1、HTML代码块<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div class="container"> <div class="box"> <div class="box-page top"></div
复制链接

扫一扫

专栏目录