用css3实现魔方动画

上代码：

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
	*{
	margin: 0;
	padding: 0;
	}
	.box{
	width: 300px;
	height: 300px;
	margin: 100px auto;
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(30deg);
	animation: updown 3s linear 3s infinite alternate;
	}
	@keyframes updown{
	0%{
	transform: rotateX(-30deg) rotateY(30deg);
	}
	100%{
	transform: rotateX(360deg) rotateY(360deg);
	}
	}

	ul{
	list-style: none;
	}
	.box li{
	width: 100px;
	height: 100px;
	border: 2px solid #fff;
	box-sizing: border-box;
	float: left;
	position: relative;
	}

	.box>div{
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.5
	}

	.box .front{
	/background-color: deeppink;/
	transform: translateZ(150px);
	}
	.box .behind{
	/background-color: yellow;/
	transform: translateZ(-150px);
	}
	.box .left{
	/background-color: greenyellow;/
	transform: rotateY(-90deg) translateZ(150px);
	}
	.box .right{
	/background-color: red;/
	transform: rotateY(90deg) translateZ(150px);
	}
	.box .top{
	/background-color: deepskyblue;/
	transform: rotateX(90deg) translateZ(150px);
	}
	.box .bottom{
	/background-color: purple;/
	transform: rotateX(-90deg) translateZ(150px);
	}
	</style>

	</head>
	<body>

	<div class="box">
	<div class="front"></div>
	<div class="behind"></div>
	<div class="left"></div>
	<div class="right"></div>
	<div class="top"></div>
	<div class="bottom"></div>
	</div>

	<script src="jquery.js"></script>
	<script>
	var box = $(".box");
	var divs = box.children();
	var lisColor = ['deeppink','yellow','greenyellow','red','deepskyblue','purple']
	divs.each(function(index,el){
	var ul = $("<ul></ul>");
	for(var i = 0; i < 9; i++){
	var li = $("<li></li>");
	li.css({"backgroundColor":lisColor[index]});
	ul.append(li);
	}
	$(el).append(ul);
	});

	var lisPosition = [];
	for(var i = 0; i < 54; i++){
	lisPosition.push(parseInt(Math.random()*350));
	}
	$('li').each(function(index,el){
	$(el).css({'left':lisPosition[index],"top":lisPosition[index]});
	})
	$('li').each(function(index,el){
	$(el).animate({'left':0,"top":0},3000);
	})

	</script>

	</body>
	</html>

用css3实现魔方动画相关推荐

CSS3简单魔方动画效果
CSS简单魔方效果在魔方效果中我们主要用到的是animation动画,transition(过渡),transform(变换) 首先我们在body里面下我们需要的标签元素 <body>& ...
html实现魔方相册,css实现魔方动画特效
CSS3实现3D魔方动画特效 *{ margin:0; padding:0; } body{ background: url(img/bg.jpg) 0 0 no-repeat; background ...
css3圆形轨迹动画
<!doctype html> <html lang="en"> <head> <meta char ...
css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构该css3线条波浪动画效果的HTML结构如下: CSS样式然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...
loading动画_超干货 CSS3/SVG Loading动画集合
随着css3实现各种炫酷动画效果越来越流行.今天给大家推荐一些css3和SVG实现loading加载动画效果. 先上一波令人愉悦的动画效果. 怎么样,是不是感觉很nice,那就继续往下看吧.这里为大家 ...
css3半空心圆_15个超强悍的CSS3圆盘时钟动画赏析
本文作者html5tricks,转载请注明出处在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个 ...
9款超绚丽的HTML5/CSS3应用和动画特效
HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验.今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单.按钮.图片 ...
JS框架_(JQuery.js)纯css3进度条动画
百度云盘传送门密码:wirc 进度条动画效果: <!DOCTYPE html> <htmllang="zh"> <head><meta ...
纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载更多专业前端知识,请上 [猿2048]www.mk2048.com

用css3实现魔方动画

用css3实现魔方动画相关推荐

最新文章

热门文章