html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>3D hover effect </title>
<link rel="stylesheet" href="css/defaulttheme.css">
<link rel="stylesheet" href="css/mainstyle.css">
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
<li id="intop">
<a data-toggle="tab" href='#tab1'>
<img src="https://hbimg.huabanimg.com/73e74c8f3cef11502f2c92507452b302ddb714d4761a4-X29U4q_fw658" />
<div class='info'>
<h3>Iä! Iä! Cthulhu fhtagn! Ph’nglui mglw’nafh Cthulhu R’lyeh wgah-nagl fhtagn</h3>
</div>
</a>
</li>
<li>
<a data-toggle="tab" href='#tab2'>
<img src="https://hbimg.huabanimg.com/73e74c8f3cef11502f2c92507452b302ddb714d4761a4-X29U4q_fw658" />
<div class='info'>
<h3>Iä! Iä! Cthulhu fhtagn! Ph’nglui mglw’nafh Cthulhu R’lyeh wgah-nagl fhtagn</h3>
</div>
</a>
</li>
<li>
<a data-toggle="tab" href='#tab3'>
<img src="https://hbimg.huabanimg.com/73e74c8f3cef11502f2c92507452b302ddb714d4761a4-X29U4q_fw658" />
<div class='info'>
<h3>Iä! Iä! Cthulhu fhtagn! Ph’nglui mglw’nafh Cthulhu R’lyeh wgah-nagl fhtagn</h3>
</div>
</a>
</li>
<li>
<a data-toggle="tab" href='#tab4'>
<img src="https://hbimg.huabanimg.com/73e74c8f3cef11502f2c92507452b302ddb714d4761a4-X29U4q_fw658" />
<div class='info'>
<h3>Iä! Iä! Cthulhu fhtagn! Ph’nglui mglw’nafh Cthulhu R’lyeh wgah-nagl fhtagn</h3>
</div>
</a>
</li>
<li>
<a data-toggle="tab" href='#tab5'>
<img src="https://hbimg.huabanimg.com/73e74c8f3cef11502f2c92507452b302ddb714d4761a4-X29U4q_fw658" />
<div class='info'>
<h3>Iä! Iä! Cthulhu fhtagn! Ph’nglui mglw’nafh Cthulhu R’lyeh wgah-nagl fhtagn</h3>
</div>
</a>
</li>
<li>
<a data-toggle="tab" href='#tab6'>
<img src="https://hbimg.huabanimg.com/73e74c8f3cef11502f2c92507452b302ddb714d4761a4-X29U4q_fw658" />
<div class='info'>
<h3>Iä! Iä! Cthulhu fhtagn! Ph’nglui mglw’nafh Cthulhu R’lyeh wgah-nagl fhtagn</h3>
</div>
</a>
</li>
<li>
<a data-toggle="tab" href='#tab7'>
<img src="https://hbimg.huabanimg.com/73e74c8f3cef11502f2c92507452b302ddb714d4761a4-X29U4q_fw658" />
<div class='info'>
<h3>Iä! Iä! Cthulhu fhtagn! Ph’nglui mglw’nafh Cthulhu R’lyeh wgah-nagl fhtagn</h3>
</div>
</a>
</li>
<li>
<a data-toggle="tab" href='#tab8'>
<img src="https://hbimg.huabanimg.com/73e74c8f3cef11502f2c92507452b302ddb714d4761a4-X29U4q_fw658" />
<div class='info'>
<h3>Iä! Iä! Cthulhu fhtagn! Ph’nglui mglw’nafh Cthulhu R’lyeh wgah-nagl fhtagn</h3>
</div>
</a>
</li>
<li>
<a data-toggle="tab" href='#tab9'>
<img src="https://hbimg.huabanimg.com/73e74c8f3cef11502f2c92507452b302ddb714d4761a4-X29U4q_fw658" />
<div class='info'>
<h3>Iä! Iä! Cthulhu fhtagn! Ph’nglui mglw’nafh Cthulhu R’lyeh wgah-nagl fhtagn</h3>
</div>
</a>
</li>
</ul>
</div>
<script src="js/threebox.js"></script>
</body>
</html>
css/defaulttheme.css
button,
hr,
input {
overflow: visible
}
audio,
canvas,
progress,
video {
display: inline-block
}
progress,
sub,
sup {
vertical-align: baseline
}
html {
font-family: sans-serif;
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
menu,
article,
aside,
details,
footer,
header,
nav,
section {
display: block
}
h1 {
font-size: 2em;
margin: .67em 0
}
figcaption,
figure,
main {
display: block
}
figure {
margin: 1em 40px
}
hr {
box-sizing: content-box;
height: 0
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects
}
a:active,
a:hover {
outline-width: 0
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted
}
b,
strong {
font-weight: bolder
}
dfn {
font-style: italic
}
mark {
background-color: #ff0;
color: #000
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
audio:not([controls]) {
display: none;
height: 0
}
img {
border-style: none
}
svg:not(:root) {
overflow: hidden
}
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button,
input {}
button,
select {
text-transform: none
}
[type=submit],
[type=reset],
button,
html [type=button] {
-webkit-appearance: button
}
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0
}
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
outline: ButtonText dotted 1px
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: .35em .625em .75em
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
progress {}
textarea {
overflow: auto
}
[type=checkbox],
[type=radio] {
box-sizing: border-box;
padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
summary {
display: list-item
}
[hidden],
template {
display: none
}
css/mainstyle.css
li {
-webkit-perspective: 400px;
perspective: 400px;
}
.info {
-webkit-transform: rotate3d(1, 0, 0, 90deg);
transform: rotate3d(1, 0, 0, 90deg);
width: 100%;
height: 100%;
padding: 20px;
position: absolute;
top: 0;
left: 0;
border-radius: 4px;
pointer-events: none;
background-color: rgb(47, 255, 227);
}
.in-top .info {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: in-top 300ms ease 0ms 1 forwards;
animation: in-top 300ms ease 0ms 1 forwards;
}
.in-right .info {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-animation: in-right 300ms ease 0ms 1 forwards;
animation: in-right 300ms ease 0ms 1 forwards;
}
.in-bottom .info {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: in-bottom 300ms ease 0ms 1 forwards;
animation: in-bottom 300ms ease 0ms 1 forwards;
}
.in-left .info {
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-animation: in-left 300ms ease 0ms 1 forwards;
animation: in-left 300ms ease 0ms 1 forwards;
}
.out-top .info {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: out-top 300ms ease 0ms 1 forwards;
animation: out-top 300ms ease 0ms 1 forwards;
}
.out-right .info {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: out-right 300ms ease 0ms 1 forwards;
animation: out-right 300ms ease 0ms 1 forwards;
}
.out-bottom .info {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: out-bottom 300ms ease 0ms 1 forwards;
animation: out-bottom 300ms ease 0ms 1 forwards;
}
.out-left .info {
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-animation: out-left 300ms ease 0ms 1 forwards;
animation: out-left 300ms ease 0ms 1 forwards;
}
@-webkit-keyframes in-top {
from {
-webkit-transform: rotate3d(-1, 0, 0, 90deg);
transform: rotate3d(-1, 0, 0, 90deg);
}
to {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
@keyframes in-top {
from {
-webkit-transform: rotate3d(-1, 0, 0, 90deg);
transform: rotate3d(-1, 0, 0, 90deg);
}
to {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
@-webkit-keyframes in-right {
from {
-webkit-transform: rotate3d(0, -1, 0, 90deg);
transform: rotate3d(0, -1, 0, 90deg);
}
to {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
@keyframes in-right {
from {
-webkit-transform: rotate3d(0, -1, 0, 90deg);
transform: rotate3d(0, -1, 0, 90deg);
}
to {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
@-webkit-keyframes in-bottom {
from {
-webkit-transform: rotate3d(1, 0, 0, 90deg);
transform: rotate3d(1, 0, 0, 90deg);
}
to {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
@keyframes in-bottom {
from {
-webkit-transform: rotate3d(1, 0, 0, 90deg);
transform: rotate3d(1, 0, 0, 90deg);
}
to {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
@-webkit-keyframes in-left {
from {
-webkit-transform: rotate3d(0, 1, 0, 90deg);
transform: rotate3d(0, 1, 0, 90deg);
}
to {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
@keyframes in-left {
from {
-webkit-transform: rotate3d(0, 1, 0, 90deg);
transform: rotate3d(0, 1, 0, 90deg);
}
to {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
@-webkit-keyframes out-top {
from {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: rotate3d(-1, 0, 0, 104deg);
transform: rotate3d(-1, 0, 0, 104deg);
}
}
@keyframes out-top {
from {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: rotate3d(-1, 0, 0, 104deg);
transform: rotate3d(-1, 0, 0, 104deg);
}
}
@-webkit-keyframes out-right {
from {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: rotate3d(0, -1, 0, 104deg);
transform: rotate3d(0, -1, 0, 104deg);
}
}
@keyframes out-right {
from {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: rotate3d(0, -1, 0, 104deg);
transform: rotate3d(0, -1, 0, 104deg);
}
}
@-webkit-keyframes out-bottom {
from {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: rotate3d(1, 0, 0, 104deg);
transform: rotate3d(1, 0, 0, 104deg);
}
}
@keyframes out-bottom {
from {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: rotate3d(1, 0, 0, 104deg);
transform: rotate3d(1, 0, 0, 104deg);
}
}
@-webkit-keyframes out-left {
from {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: rotate3d(0, 1, 0, 104deg);
transform: rotate3d(0, 1, 0, 104deg);
}
}
@keyframes out-left {
from {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: rotate3d(0, 1, 0, 104deg);
transform: rotate3d(0, 1, 0, 104deg);
}
}
/* you can ignore this ones */
ul {
padding: 0;
margin: 0 0 50px;
}
ul:after {
content: "";
display: table;
clear: both;
}
li {
position: relative;
float: left;
width: 200px;
height: 200px;
margin: 5px;
padding: 0;
list-style: none;
}
li a {
width:100%;
height:100%;
display: inline-block;
vertical-align: top;
text-decoration: none;
border-radius: 4px;
}
li a img {
width:100%;
}
li h3 {
margin: 0;
line-height:30px;
font-size: 16px;
color: rgba(255, 255, 255, 0.9);
}
li p {
font-size: 12px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.8);
}
li .normal {
width: 100%;
height: 100%;
background-color: #ECF0F1;
color: rgba(52, 73, 94, 0.6);
box-shadow: inset 0 2px 20px #e6ebed;
text-align: center;
font-size: 50px;
line-height: 200px;
}
li .normal svg {
pointer-events: none;
width: 50px;
}
li .normal svg path {
fill: rgba(52, 73, 94, 0.2);
}
* {
box-sizing: border-box;
}
body {
background-color: #fff;
}
h1 {
margin: 0 auto 5px;
text-align: center;
}
h3 {
font-family: 'Bree Serif', serif;
}
.container {
width: 840px;
margin: 0 auto;
}
header {
font-family: 'Bree Serif', serif;
text-align: center;
margin: 50px 0 25px;
color: #34495E;
}
header p {
margin: 0;
color: rgba(52, 73, 94, 0.4);
}
js/threebox.js
var nodes = document.querySelectorAll('li'),
_nodes = [].slice.call(nodes, 0);
var getDirection = function (ev, obj) {
var w = obj.offsetWidth,
h = obj.offsetHeight,
x = (ev.pageX - obj.offsetLeft - (w / 2) * (w > h ? (h / w) : 1)),
y = (ev.pageY - obj.offsetTop - (h / 2) * (h > w ? (w / h) : 1)),
d = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4;
return d;
};
var addClass = function ( ev, obj, state ) {
var direction = getDirection( ev, obj ),
class_suffix = "";
obj.className = "";
switch ( direction ) {
case 0 : class_suffix = '-top'; break;
case 1 : class_suffix = '-right'; break;
case 2 : class_suffix = '-bottom'; break;
case 3 : class_suffix = '-left'; break;
}
obj.classList.add( state + class_suffix );
};
// bind events
_nodes.forEach(function (el) {
el.addEventListener('mouseover', function (ev) {
addClass( ev, this, 'in' );
}, false);
el.addEventListener('mouseout', function (ev) {
addClass( ev, this, 'out' );
}, false);
});
不记得在哪下的了