纯css3 3D炫酷旋转动画,鼠标hover展开

Diana_cxh
Diana_cxh 发布于 2016-12-29 17:30:41 浏览:1462 类型:原创 - 随笔 分类:HTML/CSS - css 二维码: 作者原创 版权保护
鼠标放上立方体,可以展开,颜色随便乱填的,把颜色改成图片就会变得很炫哦~
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>3D旋转</title>
	<style type="text/css">
		.wrap{
			width: 650px;
			height: 200px;
			margin: 150px 360px;
			position: relative;
		}
		.cube{
			position: relative;
			width:200px;
			height:200px;
			margin:0 auto;
			-webkit-transform-style:preserve-3d;
					transform-style:preserve-3d;
			-webkit-transform:rotateX(-30deg) rotateY(-80deg);
					transform:rotateX(-30deg) rotateX(-80deg);
			-webkit-animation:rotate 20s infinite;
					animation:rotate 20s infinite;
			animation-timing-function:linear;
		}
		@-webkit-keyframes rotate{
			from{transform:rotateX(0deg) rotateY(0deg);}
			to{transform:rotateX(360deg) rotateY(360deg);}
		}
		@keyframes rotate{
			from{transform:rotateX(0deg) rotateY(0deg);}
			to{transform:rotateX(360deg) rotateY(360deg);}
		}
		.cube div{
			position: absolute;
			width: 200px;
			height: 200px;
			opacity: 0.8;
			transition:all .4s;
		}
		.cube .out_front{
			background-color: yellow;
			transform:rotateY(0deg) translateZ(100px);
		}
		.cube .out_back{
			background-color: red;
			transform:translateZ(-100px) rotateY(180deg);
		}
		.cube .out_left{
			background-color: black;
			transform:rotateY(90deg) translateZ(100px);
		}
		.cube .out_right{
			background-color: blue;
			transform:rotateY(-90deg) translateZ(100px);
		}
		.cube .out_top{
			background-color: green;
			transform:rotateX(90deg) translateZ(100px);
		}
		.cube .out_bottom{
			background-color: pink;
			transform:rotateX(90deg) translateZ(-100px);
		}
		.cube span{
			display: block;
			width: 100px;
			height: 100px;
			position: absolute;
			top:50px;
			left:50px;
		}
		.cube .in_front{
			background-color: yellow;
			transform:rotateY(0deg) translateZ(50px);
		}
		.cube .in_back{
			background-color: red;
			transform:translateZ(-50px) rotateY(180deg);
		}
		.cube .in_left{
			background-color: black;
			transform:rotateY(90deg) translateZ(50px);
		}
		.cube .in_right{
			background-color: blue;
			transform:rotateY(-90deg) translateZ(50px);
		}
		.cube .in_top{
			background-color: green;
			transform:rotateX(90deg) translateZ(50px);
		}
		.cube .in_bottom{
			background-color: pink;
			transform:rotateX(90deg) translateZ(-50px);
		}
		.cube:hover .out_front{
			transform:rotateY(0deg) translateZ(200px);
		}
		.cube:hover .out_back{
			transform:translateZ(-200px) rotateY(180deg);
		}
		.cube:hover .out_left{
			transform:rotateY(90deg) translateZ(200px);
		}
		.cube:hover .out_right{
			transform:rotateY(-90deg) translateZ(200px);
		}
		.cube:hover .out_top{
			transform:rotateX(90deg) translateZ(200px);
		}
		.cube:hover .out_bottom{
			transform:rotateX(90deg) translateZ(-200px);
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="cube">
			<!-- 前后左右上下六个方向 -->
			<div class="out_front"></div>
			<div class="out_back"></div>
			<div class="out_left"></div>
			<div class="out_right"></div>
			<div class="out_top"></div>
			<div class="out_bottom"></div>
			<!-- 小正方体 -->
			<span class="in_front"></span>
			<span class="in_back"></span>
			<span class="in_left"></span>
			<span class="in_right"></span>
			<span class="in_top"></span>
			<span class="in_bottom"></span>
		</div>
	</div>
</body>
</html>
标签:
z
给个赞 13 人点赞
收藏 40 人收藏
评论 已有 5 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
Scoripion
Scoripion2017-01-06 18:12:395F
效果蛮炫酷的
举报 支持 (0) 回复 (0)
aaamrh
aaamrh2017-01-05 13:06:194F
TG 的博客吧 //@与码共舞:好像在哪见过
举报 支持 (0) 回复 (0)
lisha1215
lisha12152017-01-03 09:53:583F
我感觉也很眼熟…… //@与码共舞:好像在哪见过
举报 支持 (0) 回复 (0)
单先生
单先生2017-01-02 20:52:382F
回忆里 //@与码共舞:好像在哪见过
举报 支持 (0) 回复 (0)
与码共舞
与码共舞2016-12-29 17:44:501F
好像在哪见过
举报 支持 (0) 回复 (3)
Diana_cxh Diana_cxh 作者

If the mountain don\'t come, I will go. Such a positive girl !

作者最新