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(0px)
    }
    .cube[data-rotate='5'] {
    	transform:rotateY(15deg) translateZ(-00px) translateX(0px)
    }
    .cube[data-rotate='6'] {
    	transform:rotateY(18deg) translateZ(-00px) translateX(0px)
    }
    .side {
    	width:100%;
    	height:100%;
    	position:absolute;
    	backface:hidden
    }
    .front {
    	height:50px;
    	transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(100px)
    }
    .left {
    	height:50px;
    	transform:rotateY(-90deg) rotateX(0deg) rotateZ(0deg) translateZ(100px)
    }
    .right {
    	height:50px;
    	transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(100px)
    }
    .back {
    	height:50px;
    	transform:rotateY(-180deg) rotateX(0deg) rotateZ(0deg) translateZ(100px)
    }
    .top {
    	height:200px;
    	transform:rotateY(0deg) rotateX(90deg) rotateZ(0deg) translateZ(100px)
    }
    .bottom {
    	height:200px;
    	transform:rotateY(0deg) rotateX(-90deg) rotateZ(0deg) translateZ(-50px)
    }
    #a .side {
    	background:#16a085
    }
    #a .front {
    	background:#1abc9c
    }
    #b .side {
    	background:#27ae60
    }
    #b .front {
    	background:#2ecc71
    }
    #c .side {
    	background:#2980b9
    }
    #c .front {
    	background:#3498db
    }
    #d .side {
    	background:#8e44ad
    }
    #d .front {
    	background:#9b59b6
    }
    #e .side {
    	background:#f39c12
    }
    #e .front {
    	background:#f1c40f
    }
    #f .side {
    	background:#d35400
    }
    #f .front {
    	background:#e67e22
    }
    #g .side {
    	background:#c0392b
    }
    #g .front {
    	background:#e74c3c
    }
    h1 {
    	font-size:8em;
    	font-family:'Lobster Two';
    	font-style:italic;
    	text-align:right;
    	line-height:.3;
    	display:table;
    	position:absolute;
    	top:60px;
    	right:30px;
    	text-shadow:2px 4px rgba(0,0,0,.3);
    	color:#ecf0f1
    }
    h1 small {
    	font-size:.2em
    }
    </style>
</head>

<body>

    <div class="wrapcube">
        <div class="cube" id="a">
            <div class="side front">HOVER ME</div>
            <div class="side left"></div>
            <di.........完整代码请登录后点击上方下载按钮下载查看