<div class="wrapper">
<ul>
<li>
<div class="picBox">
<div class="show">
<img src="https://jacokwu.cn/images/public/author.jpg" alt="">
</div>
<div class="hide">
<h3>这是一段介绍</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img src="https://jacokwu.cn/images/public/author.jpg" alt="">
</div>
<div class="hide">
<h3>这是一段介绍</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img src="https://jacokwu.cn/images/public/author.jpg" alt="">
</div>
<div class="hide">
<h3>这是一段介绍</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img src="https://jacokwu.cn/images/public/author.jpg" alt="">
</div>
<div class="hide">
<h3>这是一段介绍</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img src="https://jacokwu.cn/images/public/author.jpg" alt="">
</div>
<div class="hide">
<h3>这是一段介绍</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img src="https://jacokwu.cn/images/public/author.jpg" alt="">
</div>
<div class="hide">
<h3>这是一段介绍</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img src="https://jacokwu.cn/images/public/author.jpg" alt="">
</div>
<div class="hide">
<h3>这是一段介绍</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img src="https://jacokwu.cn/images/public/author.jpg" alt="">
</div>
<div class="hide">
<h3>这是一段介绍</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img src="https://jacokwu.cn/images/public/author.jpg" alt="">
</div>
<div class="hide">
<h3>这是一段介绍</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img src="https://jacokwu.cn/images/public/author.jpg" alt="">
</div>
<div class="hide">
<h3>这是一段介绍</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img src="https://jacokwu.cn/images/public/author.jpg" alt="">
</div>
<div class="hide">
<h3>这是一段介绍</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img src="https://jacokwu.cn/images/public/author.jpg" alt="">
</div>
<div class="hide">
<h3>这是一段介绍</h3>
</div>
</div>
</li>
</ul>
</div>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: #f1e1ff;
}
img {
width: 180px;
height: 180px;
}
.wrapper {
margin: 80px auto;
width: 900px;
}
.wrapper li {
position: relative;
display: inline-block;
width: 180px;
height: 180px;
margin: 5px;
perspective: 300px;
}
.picBox {
transform-style: preserve-3d;
animation: 200ms ease-out 0ms 1 normal forwards;
transform-origin: 50% 50% -90px;
}
.picBox,
.hide,
.show {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.hide {
background-color: #000;
color: #fff;
line-height: 180px;
text-align: center;
transform: translate3d(0, 0, -1px);
}
/*top进入*/
.out-top .hide,
.in-top .hide {
transform-origin: 0% 100%;
transform: translate3d(0, -100%, 0) rotate3d(1, 0, 0, 90deg);
}
.in-top .picBox {
animation-name: in-top;
}
.out-top .picBox {
animation-name: out-top;
}
@keyframes in-top {
form {
transform: rotate3d(0, 0, 0, 0deg);
}
to {
transform: rotate3d(-1, 0, 0, 90deg);
}
}
@keyframes out-top {
form {
transform: rotate3d(-1, 0, 0, 90deg);
}
to {
transform: rotate3d(0, 0, 0, 0deg);
}
}
/*right进入*/
.out-right .hide,
.in-right .hide {
transform-origin: 0% 0%;
transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 90deg);
}
.in-right .picBox {
animation-name: in-right;
}
.out-right .picBox {
animation-name: out-right;
}
@keyframes in-right {
form {
transform: rotate3d(0, 0, 0, 0deg);
}
to {
transform: rotate3d(0, -1, 0, 90deg);
}
}
@keyframes out-right {
form {
transform: rotate3d(0, -1, 0, 90deg);
}
to {
transform: rotate3d(0, 0, 0, 0deg);
}
}
/*bottom进入*/
.out-bottom .hide,
.in-bottom .hide {
transform-origin: 0% 0%;
transform: translate3d(0, 100%, 0) rotate3d(-1, 0, 0, 90deg);
}
.in-bottom .picBox {
animation-name: in-bottom;
}
.out-bottom .picBox {
animation-name: out-bottom;
}
@keyframes in-bottom {
form {
transform: rotate3d(0, 0, 0, 0deg);
}
to {
transform: rotate3d(1, 0, 0, 90deg);
}
}
@keyframes out-bottom {
form {
transform: rotate3d(1, 0, 0, 90deg);
}
to {
transform: rotate3d(0, 0, 0, 0deg);
}
}
/*left进入*/
.out-left .hide,
.in-left .hide {
transform-origin: 100% 0%;
transform: translate3d(-100%, 0, 0) rotate3d(0, -1, 0, 90deg);
}
.in-left .picBox {
animation-name: in-left;
}
.out-left .picBox {
animation-name: out-left;
}
@keyframes in-left {
form {
transform: rotate3d(0, 0, 0, 0deg);
}
to {
transform: rotate3d(0, 1, 0, 90deg);
}
}
@keyframes out-left {
form {
transform: rotate3d(0, 1, 0, 90deg);
}
to {
transform: rotate3d(0, 0, 0, 0deg);
}
}
var oLi = $("li");
var arr = [];
//获取方向->获取进出->添加类名
//初始化
//获取li位置信息,宽高
init();
function init() {
//将li转换成数组
Array.prototype.slice.call(oLi, 0).forEach(function(ele, index) {
arr.push({
w: ele.offsetWidth,
h: ele.offsetHeight,
l: ele.offsetLeft,
t: ele.offsetTop
});
bindEvent(ele, index);
});
}
function bindEvent(ele, index) {
$(ele).on("mouseenter", function(e) {
addClass(e, ele, "in", index);
});
$(ele).on("mouseleave", function(e) {
addClass(e, ele, "out", index);
});
}
function addClass(e, ele, state, index) {
//获取进入的方向
var d = getD(e, index);
var str = "";
switch (d) {
case 0:
str = "-left";
break;
case 1:
str = "-top";
break;
case 2:
str = "-right";
break;
case 3:
str = "-bottom";
break;
}
ele.className = "";
ele.classList.add(state + str);
}
function getD(e, index) {
var w = arr[index].w,
h = arr[index].h,
l = arr[index].l,
t = arr[index].t;
x = e.pageX - l - w / 2;
y = e.pageY - t - h / 2;
//获取进入方向
d = Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90) % 4;
return d;
}
This Pen doesn't use any external CSS resources.