Skip to content

Commit

Permalink
JQuery Images 3D Tranform Demo 2018-1-21 4
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rain120
Rain120 committed Jan 21, 2018
1 parent fc39413 commit 4f6d95d
Show file tree
Hide file tree
Showing 4 changed files with 419 additions and 0 deletions.
Binary file added JQuery-Image-3DTransform/images/pic4-3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
192 changes: 192 additions & 0 deletions JQuery-Image-3DTransform/index.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
* {
margin: 0;
list-style: none;
}

body {
background-color: #F1E1FF;
}

.wrapper {
max-width: 1000px;
margin: 80px auto;
}

.wrapper li {
position: relative;
width: 180px;
height: 180px;
margin: 20px;
display: inline-block;
perspective: 300px;
}

.picBox {
position: absolute;
/* top: 0; */
/* right: 0; */
/* bottom: 0; */
/* left: 0; */
height: 180px;
width: 180px;
transform-style: preserve-3d;
transform-origin: 50% 50% -90px;
animation: 2000ms ease-out 0ms 1 normal forwards;
/* forwards则是停在动画最后的的那个画面 */
}

.show,
.hide {
position: absolute;
/* top: 0;
right: 0;
bottom: 0;
left: 0; */
height: 180px;
width: 180px;
}

.hide {
color: #fff;
background-color: #000;
text-align: center;
line-height: 180px;
transform: translate3d(0, 0, -1px);
/* 3D空间内移动一个元素的位置 */
}

.in-top .hide,
.out-top .hide {
transform-origin: 0% 100%;
transform: translate3d(0, -100%, 0) rotate3d(1, 0, 0, 90deg);
}

.in-top .picBox {
animation-name: in-top;
animation-play-state: running;
}

.out-top .picBox {
animation-name: out-top;
animation-play-state: running;
}

@keyframes in-top {
from {
transform: rotate3d(0, 0, 0, 0deg)
}
to {
transform: rotate3d(-1, 0, 0, 90deg)
}
}

@keyframes out-top {
from {
transform: rotate3d(-1, 0, 0, 90deg)
}
to {
transform: rotate3d(0, 0, 0, 0deg)
}
}

.in-right .hide,
.out-right .hide {
transform-origin: 0% 0%;
transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 90deg);
}

.in-right .picBox {
animation-name: in-right;
animation-play-state: running;
}

.out-right .picBox {
animation-name: out-right;
animation-play-state: running;
}

@keyframes in-right {
from {
transform: rotate3d(0, 0, 0, 0deg)
}
to {
transform: rotate3d(0, -1, 0, 90deg)
}
}

@keyframes out-right {
from {
transform: rotate3d(0, -1, 0, 90deg)
}
to {
transform: rotate3d(0, 0, 0, 0deg)
}
}

.in-bottom .hide,
.out-bottom .hide {
transform-origin: 0% 0%;
transform: translate3d(0, 100%, 0) rotate3d(-1, 0, 0, 90deg);
}

.in-bottom .picBox {
animation-name: in-bottom;
animation-play-state: running;
}

.out-bottom .picBox {
animation-name: out-bottom;
animation-play-state: running;
}

@keyframes in-bottom {
from {
transform: rotate3d(0, 0, 0, 0deg)
}
to {
transform: rotate3d(1, 0, 0, 90deg)
}
}

@keyframes out-bottom {
from {
transform: rotate3d(1, 0, 0, 90deg)
}
to {
transform: rotate3d(0, 0, 0, 0deg)
}
}

.in-left .hide,
.out-left .hide {
transform-origin: 100% 0;
transform: translate3d(-100%, 0, 0) rotate3d(0, -1, 0, 90deg);
}

.in-left .picBox {
animation-name: in-left;
animation-play-state: running;
}

.out-left .picBox {
animation-name: out-left;
animation-play-state: running;
}

@keyframes in-left {
from {
transform: rotate3d(0, 0, 0, 0deg)
}
to {
transform: rotate3d(0, 1, 0, 90deg)
}
}

@keyframes out-left {
from {
transform: rotate3d(0, 1, 0, 90deg)
}
to {
transform: rotate3d(0, 0, 0, 0deg)
}
}
165 changes: 165 additions & 0 deletions JQuery-Image-3DTransform/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JQuery Images 3D Transform</title>
<link rel="stylesheet" href="./index.css">
</head>

<body>
<div class="wrapper">
<ul>
<li>
<div class="picBox">
<div class="show">
<img height="180px" width="180px" src="" />
</div>
<div class="hide">
<h3>
~~This is tag~~
</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img height="180px" width="180px" src="" />
</div>
<div class="hide">
<h3>
~~This is tag~~
</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img height="180px" width="180px" src="" />
</div>
<div class="hide">
<h3>
~~This is tag~~
</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img height="180px" width="180px" src="" />
</div>
<div class="hide">
<h3>
~~This is tag~~
</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img height="180px" width="180px" src="" />
</div>
<div class="hide">
<h3>
~~This is tag~~
</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img height="180px" width="180px" src="" />
</div>
<div class="hide">
<h3>
~~This is tag~~
</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img height="180px" width="180px" src="" />
</div>
<div class="hide">
<h3>
~~This is tag~~
</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img height="180px" width="180px" src="" />
</div>
<div class="hide">
<h3>
~~This is tag~~
</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img height="180px" width="180px" src="" />
</div>
<div class="hide">
<h3>
~~This is tag~~
</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img height="180px" width="180px" src="" />
</div>
<div class="hide">
<h3>
~~This is tag~~
</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img height="180px" width="180px" src="" />
</div>
<div class="hide">
<h3>
~~This is tag~~
</h3>
</div>
</div>
</li>
<li>
<div class="picBox">
<div class="show">
<img height="180px" width="180px" src="" />
</div>
<div class="hide">
<h3>
~~This is tag~~
</h3>
</div>
</div>
</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="./index.js"></script>
</body>

</html>
Loading

0 comments on commit 4f6d95d

Please sign in to comment.