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;.........完整代码请登录后点击上方下载按钮下载查看