您的位置：首页 > Web前端 > CSS

CSS3实现3d效果的立体盒子

2017-08-07 20:14 417 查看

学习css3那会写的案例，有一段时间了，那会还没有博客呢，现在有博客了，就把一些自我感觉比较好的案例都放上来了。

当时用DW写的，所以css代码可能看起来会有一点乱，看到的朋友多多包涵哦！

效果图如下：

代码如下：


	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>3d效果-立体盒子</title>
	<style>
	.wrap{ width:100px; height:100px; padding:100px;border:5px #666 solid; margin:100px auto; transform: scale(2); perspective-origin:center center;}
	.box{ width:100px; height:100px; background:#F0F;position: relative; transform-style:preserve-3d; transition:all linear 5s; perspective:200px; perspective-origin:center center -50px;}
	.box div{ width:100px; height:100px; position:absolute; color: #FFF; font:50px "arial";text-align:center; line-height:100px; background:lightblue; }
	.box div:nth-child(1){ left:0; top:-100px; background:#F0F; transform-origin: bottom; transform:rotateX(90deg);}
	.box div:nth-child(2){ left:-100px; top:0px; background:#9F9;
	transform-origin: right; transform:rotateY(-90deg);}
	.box div:nth-child(3){ left:0; top:0; background:#F9C;}
	.box div:nth-child(4){ left:100px; top:0;
	transform-origin: left; transform:rotateY(90deg); background:#F03;}
	.box div:nth-child(5){ left:0px; top:100px;
	transform-origin: top; transform:rotateX(-90deg); background:#FC0;}
	.box div:nth-child(6){ left:0; top:0; transform:translateZ(-100px) rotateX(180deg);}
	.box:hover{ transform: rotateX(360deg); }
	</style>
	</head>

	<body>
	<div class="wrap">
	<div class="box">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	</div>
	</div>
	</body>
	</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 web前端开发 3d

相关文章推荐

新的分享

章节导航