css实现不同的三维立方体滚动动画效果代码-html代码-BFW代码库

css实现不同的三维立方体滚动动画效果代码

代码语言：html

所属分类：三维

代码描述：css实现不同的三维立方体滚动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			h1 { text-align: center;  }
			h2 { font-family: "微软雅黑"; line-height:100px;}

			.box{ width: 200px; height: 200px; padding: 100px; display: inline-block; border: 1px solid green; text-align: center;
				perspective: 400px;
			}
			
			.box:hover #div{ transform: rotateY(-360deg);}
				
			.div div{ width: 200px; height: 200px; position: absolute; top: 0px; left: 0px; opacity: 0.6;
				border-radius: 50px; border: 1px solid white;
				transform-origin: center center -100px;
			}	
		
			.div1{ font: 50px/200px "微软雅黑"; color: white; position: relative; 
				transform-style:preserve-3d;
				animation: mupiao 3s infinite linear running;
				transform-origin: center 100px -100px;
			}
			
			.div2{ font: 50px/200px "微软雅黑"; color: white; position: relative; 
				transform-style:preserve-3d;
				animation: mupiao2 3s infinite linear running;
				transform-origin: center 100px -100px;
			}
			
			.div3{ font: 50px/200px "微软雅黑"; color: white; position: relative; 
				transform-style:preserve-3d;
				transition: 6s all; 
				animation: mupiao3 6s infinite linear running;
				transform-origin: center 100px -100px;
			}
			
			.div div:nth-of-type(1){
				background: red;
				transform: rotateY(0deg);
			}
			.div div:nth-of-type(2){
				background: green;
				transform: rotateY(90deg);
			}
			.div div:nth-of-type(3){
				background: blue;
				transform: rotateX(180deg);
			}
			.div div:nth-of-type(4){
				background: purple;
				transform: rotateY(270deg);
			}
			.div div:nth-of-type(5){
				background: yellow;
				transform: rotateX(90deg);
			}
			.div div:nth-of-type(6){
				background: cyan;
				transform: rotateX(270deg);
			}
			
			
			
			.div4{ font: 50px/200px "微软雅黑"; color: white; position: relative; 
				transform-style:preserve-3d;
				animation: mupiao4 6s infinite linear running;
				transform-origin: center 100px -100px;
			}
			.div4 div{transition: 1s all; opacity: 1; border-radius: 0px;}
			
			.div4 div:nth-of-type(1){
				background: red;
				transform: rotateY(0deg);
			}
			.div4 div:nth-of-type(2){
				background: green;
				transform: rotateY(0deg);
			}
			.div4 div:nth-of-type(3){
				background: blue;
				transform: rotateY(0deg);
			}
			.div4 div:nth-of-type(4){
				background: purple;
				transform: rotateY(0deg);
			}
			.div4 div:nth-of-type(5){
				background: yellow;
				transform: rotateX(0deg);
			}
			.div4 div:nth-of-type(6){
				background: cyan;
				transform: rotateX(0deg);
			}
			
			.div4:hover div:nth-of-type(1){
				opacity: 0.6;
				border-radius: 100px;
				transform: rotateY(0deg);
			}
			.div4:hover div:nth-of-type(2){
				opacity: 0.6;
				border-radius: 100px;
				transform: rotateY(90deg);
			}
			.div4:hover div:nth-of-type(3){
				opacity: 0.6;
				border-radius: 100px;
				transform: rotateY(180deg);
			}
			.div4:hover div:nth-of-type(4){
				opacity: 0.6;
				border-radius: 100px;.........完整代码请登录后点击上方下载按钮下载查看