css实现可拖动旋转三维立方体图片墙效果代码-html代码-BFW代码库

css实现可拖动旋转三维立方体图片墙效果代码

代码语言：html

所属分类：三维

代码描述：css实现可拖动旋转三维立方体图片墙效果代码

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

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
h3{
text-align: center;
color: #5A5A5A;
}
	body{
		background: #000;
	}
	#box{
		width: 200px;
		height: 200px;
		margin:150px auto;
		background: #ccc;
		position: relative;
		transform:perspective(800px) rotateY(-60deg) rotateX(45deg);
		transform-style:preserve-3d;
	}
	#box div{
		width:100%;
		height:100%;
		position: absolute;
		top:0;
		left: 0;
		background-size:cover; 
		-webkit-box-shadow:0 0 100px #5fbcff;
		opacity: .8;
	}
	.front{
		transform:translateZ(100px);
		background: url(//repo.bfw.wiki/bfwrepo/image/5fcd6f952cb56.png);
	}
	.back{
		transform:translateZ(-100px);
		background: url(//repo.bfw.wiki/bfwrepo/image/5fcd6f952cb56.png);
	}
	.left{
		transform:translateX(-100px) rotateY(90deg);
		background: url(//repo.bfw.wiki/bfwrepo/image/5fcd6f952cb56.png);
	}
	.right{
		transform:translateX(100px) rotateY(90deg);
		background: url(//repo.bfw.wiki/bfwrepo/image/5fcd6f952cb56.png);
	}
	.top{
		transform:translateY(-100px) rotateX(90deg);
		background: url(//repo.bfw.wiki/bfwrepo/image/5fcd6f952cb56.png);
	}
	.bottom{
		transform:.........完整代码请登录后点击上方下载按钮下载查看