Css:
li {
margin: 5px;
position: relative;
width: 180px;
height: 180px;
display: inline-block;
vertical-align: top;
-webkit-perspective: 300px;
perspective: 300px;
-webkit-transform-origin: 50% 50% 90px;
transform-origin: 50% 50% 90px;
}
.w {
font-size: medium;
font-size: initial;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50% -90px;
transform-origin: 50% 50% -90px;
will-change: transform;
-webkit-animation: 200ms ease-out 0ms 1 normal forwards paused;
animation: 200ms ease-out 0ms 1 normal forwards paused;
}
.f,
.b {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: white;
-webkit-transition: none;
transition: none;
}
.f {
background-color: #00BCD4;
background: -webkit-linear-gradient(#00BCD4, #673AB7);
background: linear-gradient(#00BCD4, #673AB7);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0)
}
.f > svg{
mix-blend-mode: luminosity;
}
.b {
padding: 16px;
padding: 1rem;
background-image: -webkit-radial-gradient(circle, #333, #000 160%);
background-image: radial-gradient(circle, #333, #000 160%);
-webkit-transform: translate3d(0,0,-1px);
transform: translate3d(0,0,-1px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-shadow: 0 20px 20px black;
text-align: center;
}
.in-top .b,
.out-top .b {
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: translate3d(0, -100%, 0) rotate3d(1,0,0,90deg);
transform: translate3d(0, -100%, 0) rotate3d(1,0,0,90deg);
}
.in-right .b,
.out-right .b {
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0,1,0,90deg);
transform: translate3d(100%, 0, 0) rotate3d(0,1,0,90deg);
}
.in-bottom .b,
.out-bottom .b {
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translate3d(0, 100%, 0) rotate3d(-1,0,0,90deg);
transform: translate3d(0, 100%, 0) rotate3d(-1,0,0,90deg);
}
.in-left .b,
.out-left .b {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: translate3d(-100%,0,0) rotate3d(0,-1,0,90deg);
transform: translate3d(-100%,0,0) rotate3d(0,-1,0,90deg);
}
.in {
}
.in-top .w{
-webkit-animation-name: in-top;
animation-name: in-top;
-webkit-animation-play-state: running;
animation-play-state: running;
}
.in-right .w{
-webkit-animation-name: in-right;
animation-name: in-right;
-webkit-animation-play-state: running;
animation-play-state: running;
}
.in-bottom .w{
-webkit-animation-name: in-bottom;
animation-name: in-bottom;
-webkit-animation-play-state: running;
animation-play-state: running;
}
.in-left .w{
-webkit-animation-name: in-left;
animation-name: in-left;
-webkit-animation-play-state: running;
animation-play-state: running;
}
.out {
}
.out-top .w{
-webkit-animation-name: out-top;
animation-name: out-top;
-webkit-animation-play-state: running;
animation-play-state: running;
}
.out-right .w{
-webkit-animation-name: out-right;
animation-name: out-right;
-webkit-animation-play-state: running;
animation-play-state: running;
}
.out-bottom .w{
-webkit-animation-name: out-bottom;
animation-name: out-bottom;
-webkit-animation-play-state: running;
animation-play-state: running;
}
.out-left .w{
-webkit-animation-name: out-left;
animation-name: out-left;
-webkit-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes in-top {
from {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
to {-webkit-transform: rotate3d(-1,0,0,90deg);transform: rotate3d(-1,0,0,90deg)}
}
@keyframes in-top {
from {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
to {-webkit-transform: rotate3d(-1,0,0,90deg);transform: rotate3d(-1,0,0,90deg)}
}
@-webkit-keyframes out-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 out-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,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
to {-webkit-transform: rotate3d(0,-1,0,90deg);transform: rotate3d(0,-1,0,90deg)}
}
@keyframes in-right {
from {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
to {-webkit-transform: rotate3d(0,-1,0,90deg);transform: rotate3d(0,-1,0,90deg)}
}
@-webkit-keyframes out-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 out-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(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
to {-webkit-transform: rotate3d(1,0,0,90deg);transform: rotate3d(1,0,0,90deg)}
}
@keyframes in-bottom {
from {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
to {-webkit-transform: rotate3d(1,0,0,90deg);transform: rotate3d(1,0,0,90deg)}
}
@-webkit-keyframes out-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 out-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,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
to {-webkit-transform: rotate3d(0,1,0,90deg);transform: rotate3d(0,1,0,90deg)}
}
@keyframes in-left {
from {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
to {-webkit-transform: rotate3d(0,1,0,90deg);transform: rotate3d(0,1,0,90deg)}
}
@-webkit-keyframes out-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 out-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)}
}
/* ======= aesthetics ======= */
* {
margin: 0;
box-sizing: border-box;
}
body {
padding: 48px 24px;
padding: 3rem 1.5rem;
font-size: 16px;
font-family: 'Sahitya', serif;
color: #000;
background-color: #fff;
line-height: 1.618;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
padding-bottom: 48px;
padding-bottom: 3rem;
}
h1 {
font-size: 2em
}
h1 sup{
font-size: .7em;
color: #00BCD4;
}
ul {
font-size: 0;
padding: 0;
max-width: 760px;
margin: 0 auto;
list-style: none
}
ul::after{
content: '';
display: table;
clear: both;
}
footer {
font-size: 12px;
font-size: .75rem;
font-family: monospace;
padding-top: 48px;
padding-top: 3rem
}
footer a{
display: inline-block;
vertical-align: middle;
}
footer svg{
fill: currentColor;
}
:link,:visited {
color: #00BCD4;
}
.-center {
text-align: center;
}
.-neutral-mid {
color: rgb(153, 153, 153);
}
Code Hiển Thị:
<ul class='-center'>
<li>
<div class='w'>
<div class='f'>
<svg viewBox='0 0 180 180'>
<image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='https://i.ytimg.com/vi/FlghO6iJXJQ/maxresdefault.jpg'></image>
</svg>
</div>
<div class='b'>
<h3>
Cua
</h3>
</div>
</div>
</li>
<li>
<div class='w'>
<div class='f'>
<svg viewBox='0 0 180 180'>
<image height='100%' preserveAspectRatio='Thánh Gióng' width='100%' xlink:href='http://khoemoivui.com/wp-content/uploads/2014/11/hoat-hinh-viet-nam-1.jpg'></image>
</svg>
</div>
<div class='b'>
<h3>
Thánh Gióng
</h3>
</div>
</div>
</li>
<li>
<div class='w'>
<div class='f'>
<svg viewBox='0 0 180 180'>
<image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='http://toplist.vn/images/800px/tit-va-mit-3275.jpg'></image>
</svg>
</div>
<div class='b'>
<h3>
Tam Mao
</h3>
</div>
</div>
</li>
<li>
<div class='w'>
<div class='f'>
<svg viewBox='0 0 180 180'>
<image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href=''></image>
</svg>
</div>
<div class='b'>
<h3>
Đại Chiến Bạch Đằng
</h3>
</div>
</div>
</li>
<li>
<div class='w'>
<div class='f'>
<svg viewBox='0 0 180 180'>
<image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='https://i.ytimg.com/vi/Nf7agB9_UUI/maxresdefault.jpg'></image>
</svg>
</div>
<div class='b'>
<h3>
Cậu Bé Cờ Lau
</h3>
</div>
</div>
</li>
<li>
<div class='w'>
<div class='f'>
<svg viewBox='0 0 180 180'>
<image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='https://i.ytimg.com/vi/a8ivMpWaqyQ/maxresdefault.jpg'></image>
</svg>
</div>
<div class='b'>
<h3>
Chú Cóc Con
</h3>
</div>
</div>
</li>
<li>
<div class='w'>
<div class='f'>
<svg viewBox='0 0 180 180'>
<image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='https://i.ytimg.com/vi/eBDYhGZcvoc/maxresdefault.jpg'></image>
</svg>
</div>
<div class='b'>
<h3>
Gậy Ông Đập Lưng Ông
</h3>
</div>
</div>
</li>
<li>
<div class='w'>
<div class='f'>
<svg viewBox='0 0 180 180'>
<image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href=''></image>
</svg>
</div>
<div class='b'>
<h3>
Thần Đồng Đất Việt
</h3>
</div>
</div>
</li>
<li>
<div class='w'>
<div class='f'>
<svg viewBox='0 0 180 180'>
<image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='https://upload.wikimedia.org/wikipedia/vi/1/11/%C4%90%C3%A1ng_%C4%91%E1%BB%9Di_th%E1%BA%B1ng_C%C3%A1o_(G%C3%A0_v%C3%A0_G%E1%BA%A5u).jpg'></image>
</svg>
</div>
<div class='b'>
<h3>
Việt Nam
</h3>
</div>
</div>
</li>
<li>
<div class='w'>
<div class='f'>
<svg viewBox='0 0 180 180'>
<image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='https://s2-ssl.dmcdn.net/Orewo/1280x720-cno.jpg'></image>
</svg>
</div>
<div class='b'>
<h3>
Hai Chú Dế Mèn
</h3>
</div>
</div>
</li>
<li>
<div class='w'>
<div class='f'>
<svg viewBox='0 0 180 180'>
<image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='https://s1-ssl.dmcdn.net/NrWEj/1280x720-WVM.jpg'></image>
</svg>
</div>
<div class='b'>
<h3>
Viên Ngọc Ước
</h3>
</div>
</div>
</li>
<li>
<div class='w'>
<div class='f'>
<svg viewBox='0 0 180 180'>
<image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='https://s1-ssl.dmcdn.net/XxggL/1280x720-AnO.jpg'></image>
</svg>
</div>
<div class='b'>
<h3>
Vịt Con Xấu Xí
</h3>
</div>
</div>
</li>
</ul>
Thêm Js:
<script type="text/javascript">
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
// - Noel Delgado | @pixelia_me
var DAH = function () {
function DAH(nodes) {
var _this = this;
_classCallCheck(this, DAH);
this.nodes = [];
Array.prototype.slice.call(nodes, 0).forEach(function (node) {
_this.nodes.push(new Node(node));
});
this._bindEvents();
}
DAH.prototype._bindEvents = function _bindEvents() {
var _this2 = this;
['_resizeHandler'].forEach(function (fn) {
return _this2[fn] = _this2[fn].bind(_this2);
});
window.addEventListener('resize', this._resizeHandler, false);
};
DAH.prototype._resizeHandler = function _resizeHandler() {
this.nodes.forEach(function (node) {
return node.update();
});
};
return DAH;
}();
var Node = function () {
function Node(node) {
_classCallCheck(this, Node);
this.element = node;
this._bindEvents().update();
}
Node.prototype.update = function update() {
// const bcr = this.element.getBoundingClientRect();
// this.l = bcr.left;
// this.t = bcr.top;
this.w = this.element.offsetWidth;
this.h = this.element.offsetHeight;
this.l = this.element.offsetLeft;
this.t = this.element.offsetTop;
};
Node.prototype._bindEvents = function _bindEvents() {
var _this3 = this;
['_mouseEnterHandler', '_mouseOutHandler'].forEach(function (fn) {
return _this3[fn] = _this3[fn].bind(_this3);
});
this.element.addEventListener('mouseenter', this._mouseEnterHandler, false);
this.element.addEventListener('mouseout', this._mouseOutHandler, false);
return this;
};
Node.prototype._mouseEnterHandler = function _mouseEnterHandler(ev) {
this._addClass(ev, 'in');
};
Node.prototype._mouseOutHandler = function _mouseOutHandler(ev) {
this._addClass(ev, 'out');
};
Node.prototype._addClass = function _addClass(ev, state) {
var direction = this._getDirection(ev);
var class_suffix = '';
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;
}
this.element.className = '';
this.element.classList.add(state + class_suffix);
};
Node.prototype._getDirection = function _getDirection(ev) {
var w = this.w,
h = this.h,
x = ev.pageX - this.l - w / 2 * (w > h ? h / w : 1),
y = ev.pageY - this.t - h / 2 * (h > w ? w / h : 1),
d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;
return d;
};
return Node;
}();
new DAH(document.querySelectorAll('li'));
</script>
Nhận xét
Đăng nhận xét