css3实现立方体动画

scarsun

于 2018-07-31 16:39:57 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/scarsun/article/details/81316148

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>立方体动画</title>
<style type="text/css">
body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{
	margin:0;
	padding:0;
}
html,body{
	height: 100%;
}
body{
	background: url(img/body_bg.png) repeat-x;
	background-size: 100% 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.box{
	width: 200px;
	height: 200px;
	/*background: blue;*/
	transform-style: preserve-3d;
	/*transform:rotateY(30deg) rotateX(-15deg);*/
	animation:lft_ani 8s infinite linear;
}
.box a{
	display: block;
	opacity: .4;
	border: 1px solid black;
	transform-style:preserve-3d;
}
.box .small{
	width: 100px;
	height: 100px;
	background: #18fa07;
	position: absolute;
	left: 50px;
	top: 50px;
}
.box .big{
	width: 200px;
	height: 200px;
	background:#2501fd;
	position: absolute;
	left: 0;
	top: 0;
	transition: all 1s;
}

.box .big:nth-of-type(1){