css打开三维盒子立体动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css打开三维盒子立体动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/prefixfree.js"></script>
<style>
    html,body {
	height:100%;
}
body {
	margin:0;
	overflow:hidden;
	background:radial-gradient(circle,#444857,#2d303a);
	color:#b8bbc8;
	font-family:'Lato','Lucida Grande','Lucida Sans Unicode',Tahoma,Sans-Serif;
	font-weight:400;
	font-size:15px;
}
.container {
	position:absolute;
	top:50%;
	left:50%;
	font-size:40px;
	transform-style:preserve-3d;
}
.fox {
	position:absolute;
	top:50%;
	left:50%;
	transform-style:preserve-3d;
	transform:rotateX(-35deg) rotateY(-45deg) scale3d(0.3,0.3,0.3);
	animation:fox 6.6s infinite ease-in-out both;
}
.fox .rot {
	position:absolute;
	top:50%;
	left:50%;
	transform-style:preserve-3d;
	animation:rot 6.6s infinite both;
}
.fox .side {
	position:absolute;
	top:50%;
	left:50%;
	width:2em;
	height:2.5em;
	margin:-1.25em 0 0 -1em;
	background:#f68b1f;
	overflow:hidden;
}
.fox .side:nth-child(2n) {
	background:#f15a22;
}
.fox .side:nth-child(1)::before,.fox .side:nth-child(2)::before {
	content:'';
	position:absolute;
	display:block;
	top:54%;
	left:61%;
	width:.35em;
	height:.35em;
	margin:-.175em 0 0 -.175em;
	transform:skewX(-20deg) scaleY(1.2);
	border-radius:50%;
	background:#fff;
	filter:drop-shadow(0 0 0.05em rgba(0,0,0,0.1));
	animation:eyes 6.6s infinite both,eyeL 6.6s infinite both;
}
.fox .side:nth-child(1)::after,.fox .side:nth-child(2)::after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-image:linear-gradient(to top left,#818284,#818284 33%,#67809b 50%,transparent 50%),linear-gradient(to bottom right,#fff,#fff 50%,transparent 50%);
	background-size:.3em .35em,.5em .5em;
	background-position:bottom right,.1em .1em;
	background-repeat:no-repeat;
	filter:drop-shadow(0.02em 0.02em 0.03em rgba(0,0,0,0.1));
	animation:earsNose 6.6s infinite both;
}
.fox .side:nth-child(1) {
	transform:rotateY(0deg) translateZ(1em);
	animation:front 6.6s infinite both;
}
.fox .side:nth-child(2) {
	transform:rotateY(90deg) translateZ(1em) scaleX(-1);
	background-image:linear-gradient(to bottom,rgba(138,91,53,0),rgba(138,91,53,0)),linear-gradient(to bottom,rgba(138,91,53,0),rgba(138,91,53,0));
	background-position:center top,center bottom;
	background-size:0.5em 0.5em,0.5em 0.25em;
	background-repeat:no-repeat;
	animation:right 6.6s infinite both;
}
.fox .side:nth-child(2)::before {
	animation:eyes 6.6s infinite both,eyeR 6.6s infinite both;
}
.fox .side:nth-child(3) {
	width:2em;
	height:2em;
	transform:translate(-50%,1.5em) rotateZ(-25deg) translate(50%,-1.5em) rotateX(90deg) translateZ(1em) translateX(-50%) rotateY(-145deg) translateX(50%);
	animation:tail2 6.6s infinite both;
}
.fox .side:nth-child(3)::before {
	content:'';
	position:absolute;
	top:50%;
	left:0;
	height:.5em;
	width:100%;
	margin-top:-.25em;
	background:#a37348;
	opacity:0;
	animation:tail2M2 6.6s infinite both;
}
.fox .side:nth-child(3)::after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-image:linear-gradient(154deg,#fff,#fff 50%,transparent 50%),linear-gradient(116deg,#fff,#fff 50%,transparent 50%);
	background-size:.7em .2em,.2em .7em;
	background-position:.1em .1em;
	background-repeat:no-repeat;
	filter:drop-shadow(0.02em 0.02em 0.03em rgba(0,0,0,0.1));
	transform:rotate(180deg);
	animation:tail2M 6.6s infinite both;
}
.fox .side:nth-child(4) {
	transform:rotateY(-90deg) translateZ(1em) translateY(50%) rotateX(-25deg) translateY(-50%);
	animation:tail1 6.6s infinite both;
}
.box {
	position:absolute;
	top:50%;
	left:50%;
	transform-style:preserve-3d;
	transform:rotateX(-35deg) rotateY(-45deg);
	animation:box 6.6s infinite both;
}
.box .side {
	position:absolute;
	top:50%;
	left:50%;
	width:2em;
	height:2em;
	margin:-1em 0 0 -1em;
	background:#d7b18f;
	overflow:hidden;
	animation:boxSide 6.6s infinite both;
}
.box .side:nth-child(1) {
	transform:rotateY(0deg) translateZ(1em);
}
.box .side:nth-child(2) {
	transform:rotateY(90deg) translateZ(1em);
	background-color:#a7805a;
	background-image:linear-gradient(to bottom,#8a5b35,#8a5b35),linear-gradient(to bottom,#8a5b35,#8a5b35);
	background-position:center top,center bottom;
	background-size:.5em .4em,.5em .2em;
	background-repeat:no-repeat;
}
.box .side:nth-child(3),.box .side:nth-child(4) {
	transform:rotateX(90deg) translateZ(1em) translateY(-1em) rotateX(0deg) translateY(1em);
	height:1em;
	transform-origin:bottom;
	background:linear-gradient(to top,#a37348 0.25em,#c59e78 0.25em);
	animation:boxTop1 6.6s infinite both,boxSide 6.6s inf.........完整代码请登录后点击上方下载按钮下载查看