html/css/js爱情魔方实验

于 2020-01-06 19:59:29 发布
阅读量723 收藏 3
点赞数 2
分类专栏： 前端 文章标签： css js css3 html animation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43698704/article/details/103860082
版权

成品

在这里插入图片描述

第一步构建框架(六个面)

在这里插入图片描述

<<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>爱情魔方</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#container{
			width:300px;
			height:300px;
			margin:200px auto;
		}
		.box{
			width: 300px;
			height: 300px;
			/*居中显示*/
			
		}
		.box-page{
			width: 300px;
			height: 300px;

			
		}
		.top{
			background-color: red;
			/*transform: translateZ(150px);*/
		}
		.bottom{
			background-color: green;
			/*transform: translateZ(-150px) rotateX(180deg);*/
		}
		.right{
			background-color: orange;
			/*transform: translateX(150px) rotateY(90deg);*/
		}
		.left{
			background-color:pink;
			/*transform: translateX(-150px) rotateY(-90deg);*/
		}
		.after{
			background-color: blue;
			/*transform: translateY(-150px) rotateX(90deg);*/
		}
		.before{
			background-color: yellow;
			/*transform: translateY(150px) rotateX(-90deg);*/
		}

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

第二步构建立方体

在这里插入图片描述
注意此处需要在非ie浏览器打开
此处改变的有1.添加3d转换代码transform-style:preserve-3d;和将每一面位置初始化position: absolute;
2.移动和旋转每一个面，使他们能够围成一个立方体
3.为了更好的观察立方体，所以设置视角为#container{}perspective: 2000px;
旋转盒子在.box{}中添加transform:rotateX(45deg) rotateY(45deg) ;让盒子有3d可观察

<<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>爱情魔方</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#container{
			width:300px;
			height:300px;
			/*order:1px solid #000;*/
			margin: 150px auto;
			perspective: 2000px;
		}
		.box{
			width: 300px;
			height: 300px;
			/*子元素保持3d转换*/
			/*transform-style:preserve-3d;*/
			transform-style:preserve-3d;
			
			/*测试代码*/
			transform:rotateX(45deg) rotateY(45deg) ;

		}
		.box-page{
			width: 300px;
			height: 300px;
			/*位置初始化*/
			position: absolute;
		}
		.top{
			background-color: red;
			-webkit-transform: translateZ(150px);
			-ms-transform: translateZ(150px);
			-o-transform: translateZ(150px);
			transform: translateZ(150px);
			

		}
		.bottom{
			background-color: green;
			-webkit-transform: translateZ(-150px) rotatex(180deg);
			-ms-transform: translateZ(-150px) rotatex(180deg);
			-o-transform: translateZ(-150px) rotatex(180deg);
			transform: translateZ(-150px) rotatex(180deg);
			
		}
		.right{
			background-color: orange;
			-webkit-transform: translateX(150px) rotateY(90deg);
			-ms-transform:translateX(150px) rotateY(90deg) ;
			-o-transform:translateX(150px) rotateY(90deg) ;
			transform:translateX(150px) rotateY(90deg);*/
		}
		.left{
			background-color:pink;
			-webkit-transform: translateX(-150px) rotateY(-90deg);
			-ms-transform: translateX(-150px) rotateY(-90deg);
			-o-transform: translateX(-150px) rotateY(-90deg);
			transform: translateX(-150px) rotateY(-90deg);
			
		}
		.before{
			background-color: blue;
			-webkit-transform: translateY(150px) rotateX(-90deg);
			-ms-transform: translateY(150px) rotateX(-90deg);
			-o-transform: translateY(150px) rotateX(-90deg);
			transform: translateY(150px) rotateX(-90deg);
			/*transform: translateY(150px) rotateX(-90deg);*/
		}
		.after{
			background-color: yellow;
			-webkit-transform: translateY(90px) rotateX(90deg);
			-ms-transform: translateY(90px) rotateX(90deg);
			-o-transform: translateY(90px) rotateX(90deg);
			transform: translateY(90px) rotateX(90deg);
			/*transform: translateY(150px) rotateX(-90deg);*/
		}

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

第三步绑定图片and加动画

在这里插入图片描述
注意1.设置动画是需将每一个box-page设置成：transform-style:preserve-3d;这样才可以有3d动画。
2.url(img/a"+i+".jpg);注意双引号的位置。
3.图片背景位置绑定时请注意行列为负数

<<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>爱情魔方</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#container{
			width:300px;
			height:300px;
			/*order:1px solid #000;*/
			margin: 150px auto;
			perspective: 2000px;
		}
		.box{
			width: 300px;
			height: 300px;
			/*子元素保持3d转换*/
			/*transform-style:preserve-3d;*/
			transform-style:preserve-3d;
			
			/*测试代码*/
			/*transform:rotateX(45deg) rotateY(45deg) ;*/
			animation: ro 4s linear infinite;

		}
		@keyframes ro{
			0%{
				-webkit-transform: rotateX(0deg) rotateY(0deg);
				-ms-transform: rotateX(0deg) rotateY(0deg);
				-o-transform: rotateX(0deg) rotateY(0deg);
				transform: rotateX(0deg) rotateY(0deg);
			}
			100%{
				-webkit-transform: rotateX(360deg) rotateY(360deg);
				-ms-transform: rotateX(360deg) rotateY(360deg);
				-o-transform: rotateX(360deg) rotateY(360deg);
				transform: rotateX(360deg) rotateY(360deg);
			}
		}
		.box-page{
			width: 300px;
			height: 300px;
			/*位置初始化*/
			position: absolute;
		}
		.top{
			transform-style:preserve-3d;
			/*background-color: red;*/
			-webkit-transform: translateZ(150px);
			-ms-transform: translateZ(150px);
			-o-transform: translateZ(150px);
			transform: translateZ(150px);
			

		}
		.bottom{
			transform-style:preserve-3d;
			/*background-color: green;*/
			-webkit-transform: translateZ(-150px) rotatex(180deg);
			-ms-transform: translateZ(-150px) rotatex(180deg);
			-o-transform: translateZ(-150px) rotatex(180deg);
			transform: translateZ(-150px) rotatex(180deg);
			
		}
		.right{
			transform-style:preserve-3d;
			/*background-color: orange;*/
			-webkit-transform: translateX(150px) rotateY(90deg);
			-ms-transform:translateX(150px) rotateY(90deg) ;
			-o-transform:translateX(150px) rotateY(90deg) ;
			transform:translateX(150px) rotateY(90deg);*/
		}
		.left{
			transform-style:preserve-3d;
			/*background-color:pink;*/
			-webkit-transform: translateX(-150px) rotateY(-90deg);
			-ms-transform: translateX(-150px) rotateY(-90deg);
			-o-transform: translateX(-150px) rotateY(-90deg);
			transform: translateX(-150px) rotateY(-90deg);
			
		}
		.before{
			transform-style:preserve-3d;
			/*background-color: blue;*/
			-webkit-transform: translateY(150px) rotateX(-90deg);
			-ms-transform: translateY(150px) rotateX(-90deg);
			-o-transform: translateY(150px) rotateX(-90deg);
			transform: translateY(150px) rotateX(-90deg);
			/*transform: translateY(150px) rotateX(-90deg);*/
		}
		.after{
			transform-style:preserve-3d;
			/*background-color: yellow;*/
			-webkit-transform: translateY(-150px) rotateX(90deg);
			-ms-transform: translateY(-150px) rotateX(90deg);
			-o-transform: translateY(-150px) rotateX(90deg);
			transform: translateY(-150px) 5rotateX(90deg);
			/*transform: translateY(150px) rotateX(-90deg);*/
		}
		.box-page div:nth-child(1){
				animation: a1 4.5s ease-in;
		}
		.box-page div:nth-child(2){
				animation: a1 4.5s ease-in 0.5s;
		}
		.box-page div:nth-child(3){
				animation: a1 4.5s ease-in 1s;
		}
		.box-page div:nth-child(4){
				animation: a1 4.5s ease-in 2s;
		}
		.box-page div:nth-child(5){
				animation: a1 4.5s ease-in 3s;
		}
		.box-page div:nth-child(6){
				animation: a1 4.5s ease-in 4s;
		}
		.box-page div:nth-child(7){
				animation: a1 4.5s ease-in 5s;
		}
		.box-page div:nth-child(8){
				animation: a1 4.5s ease-in 6s;
		}
		.box-page div:nth-child(9){
				animation: a1 4.5s ease-in 7s;
		}
		@keyframes a1{
			0%{
				-webkit-transform: translateZ(0px) scale(1) rotateZ(0deg);
				-ms-transform: translateZ(0px) scale(1) rotateZ(0deg);
				-o-transform: translateZ(0px) scale(1) rotateZ(0deg);
				transform: translateZ(0px) scale(1) rotateZ(0deg);
			}
			20%{
				-webkit-transform: translateZ(300px) scale(0) rotateZ(720deg);
				-ms-transform: translateZ(300px) scale(0) rotateZ(720deg);
				-o-transform: translateZ(300px) scale(0) rotateZ(720deg);
				transform: translateZ(300px) scale(0) rotateZ(720deg);
			}
			90%{
				-webkit-transform: translateZ(300px) scale(0) rotateZ(720deg);
				-ms-transform: translateZ(300px) scale(0) rotateZ(720deg);
				-o-transform: translateZ(300px) scale(0) rotateZ(720deg);
				transform: translateZ(300px) scale(0) rotateZ(720deg);

			}
			100%{
				-webkit-transform: translateZ(0px) scale(1) rotateZ(0deg);
				-ms-transform: translateZ(0px) scale(1) rotateZ(0deg);
				-o-transform: translateZ(0px) scale(1) rotateZ(0deg);
				transform: translateZ(0px) scale(1) rotateZ(0deg);
			}
		}
	</style>
</head>
<body>
	<div id="container">
		<div class="box">
			<div class="top box-page"></div>
			<div class="bottom box-page"></div>
			<div class="left box-page"></div>
			<div class="right box-page"></div>
			<div class="before box-page"></div>
			<div class="after box-page"></div>
	</div>
	</div>
	<script type="text/javascript" >
		var arr=document.querySelectorAll(".box-page");
		//便利6个面中的每一个面
		for (var i =0; i <arr.length; i++) {
			//外层循环行
			for(var r=0;r<3;r++){
				//内存循环遍历列
				for(var c=0;c<3;c++){
					//创建元素
					var divs=document.createElement("div");
					//千万不要出现中文分号错误
					divs.style.cssText = "width:100px;height:100px;border: 1px solid #fff;position:absolute;box-sizing:border-box;background-image:url(img/a"+i+".jpg);background-size:300px 300px;";
					
					
					arr[i].appendChild(divs);
					divs.style.left=c*100+"px";
					divs.style.top=r*100+"px";
					divs.style.backgroundPositionX=-c*100+"px";//为啥是负的呢？
					divs.style.backgroundPositionY=-r*100+"px";

				}

			}
		}

	</script>
</body>
</html>

参考：中国大学mooc网，北京林业大学的《web前端开发》课程。

CSU-Benjamin
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值