css实现鼠标悬浮三维旋转菜单效果代码-html代码-BFW代码库

css实现鼠标悬浮三维旋转菜单效果代码

代码语言：html

代码描述：css实现鼠标悬浮三维旋转菜单效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
* {
	margin:0;
	padding:0
}
body {
	color:#fff;
	background:#2c3e50;
	font-size:12px;
	min-width:800px;
	display:block;
	position:relative

}
.wrapcube {
	perspective:2000px;
	perspective-origin:center center;
	width:200px;
	height:320px;
	position:absolute;
	top:50px;
	left:50px;
	
}
.cube {
	width:100%;
	height:50px;
	margin:0;
	position:relative;
	transition:.25s all ease-out;
	transform-style:preserve-3d;
	font-family:arial,helvetica,sans-serif;
	text-align:center;
	line-height:4.5
}
#a {
	z-index:1
}
#b {
	z-index:2
}
#c {
	z-index:3
}
#d {
	z-index:4
}
#e {
	z-index:3
}
#f {
	z-index:2
}
#g {
	z-index:1
}
.cube[data-rotate='1'] {
	transform:rotateY(3deg) translateZ(-00px) translateX(0px)
}
.cube[data-rotate='2'] {
	transform:rotateY(6deg) translateZ(-00px) translateX(0px)
}
.cube[data-rotate='3'] {
	transform:rotateY(9deg) translateZ(-00px) translateX(0px)
}
.cube[data-rotate='4'] {
	transform:rotateY(12deg) translateZ(-00px) translateX.........完整代码请登录后点击上方下载按钮下载查看