forked from Public/pics
Aaron van Geffen
a208c0482f
Previously, a NotAllowedException would be thrown if an invalid session was encountered. However, these exceptions were not caught, and hence would yield a fatal uncaught exception error. At this point in Kabuki, the ErrorHandler class has not been registered yet for error handling purposes. This error is therefore not visible if the PHP ini directive 'display_errors' is set to 'Off'. As this is the default production value, the script would fail with a blank page in such cases.
778 lines
14 KiB
CSS
778 lines
14 KiB
CSS
/**
|
|
* Styles for the fifth version of Aaronweb.net.
|
|
* (C) Aaron van Geffen 2013, 2014
|
|
* DO NOT COPY OR RE-USE WITHOUT EXPLICIT WRITTEN PERMISSION. THANK YOU.
|
|
*/
|
|
|
|
@import url(//fonts.googleapis.com/css?family=Press+Start+2P);
|
|
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic);
|
|
|
|
@font-face {
|
|
font-family: 'Invaders';
|
|
src: url('fonts/invaders.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
body {
|
|
font: 13px/1.7 "Open Sans", sans-serif;
|
|
padding: 0 0 3em;
|
|
margin: 0;
|
|
background: #aaa 0 -50% fixed;
|
|
background-image: radial-gradient(ellipse at top, #ccc 0%, #aaa 55%, #333 100%);
|
|
}
|
|
|
|
#wrapper, header {
|
|
width: 95%;
|
|
min-width: 900px;
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
header {
|
|
overflow: auto;
|
|
}
|
|
|
|
a {
|
|
color: #963626;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
color: #262626;
|
|
}
|
|
|
|
/* Logo
|
|
---------*/
|
|
h1#logo {
|
|
color: #fff;
|
|
float: left;
|
|
font: 200 50px 'Press Start 2P', sans-serif;
|
|
margin: 40px 0 50px 10px;
|
|
padding: 0;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
|
|
}
|
|
h1#logo:before {
|
|
color: #fff;
|
|
content: 'B';
|
|
float: left;
|
|
font: 75px 'Invaders';
|
|
margin: -4px 20px 0 0;
|
|
padding: 0;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
|
|
}
|
|
a h1#logo {
|
|
text-decoration: none;
|
|
}
|
|
a:hover h1#logo, a:hover h1#logo:before {
|
|
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
|
|
/* Navigation
|
|
---------------*/
|
|
ul#nav {
|
|
margin: 55px 10px 0 0;
|
|
padding: 0;
|
|
float: right;
|
|
list-style: none;
|
|
}
|
|
ul#nav li {
|
|
float: left;
|
|
}
|
|
ul#nav li a {
|
|
color: #fff;
|
|
display: block;
|
|
float: left;
|
|
font: 200 20px 'Press Start 2P', sans-serif;
|
|
margin: 0 0 0 32px;
|
|
padding: 10px 0;
|
|
text-decoration: none;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
|
|
}
|
|
ul#nav li a:hover {
|
|
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
|
|
/* Pagination
|
|
---------------*/
|
|
.pagination {
|
|
clear: both;
|
|
text-align: center;
|
|
}
|
|
.pagination ul {
|
|
display: inline-block;
|
|
margin: 0;
|
|
padding: 0;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
.pagination ul > li {
|
|
display: inline;
|
|
}
|
|
.pagination ul > li > a, .pagination ul > li > span {
|
|
float: left;
|
|
font: 300 18px/2.2 "Open Sans", sans-serif;
|
|
padding: 6px 22px;
|
|
text-decoration: none;
|
|
background-color: #fff;
|
|
border-right: 1px solid #ddd;
|
|
}
|
|
|
|
.pagination ul > li > a:hover, .pagination ul > li > a:focus,
|
|
.pagination ul > .active > a, .pagination ul > .active > span {
|
|
background-color: #eee;
|
|
}
|
|
|
|
.pagination ul > .active > a, .pagination ul > .active > span {
|
|
cursor: default;
|
|
}
|
|
|
|
.pagination ul > .disabled > span, .pagination ul > .disabled > a,
|
|
.pagination ul > .disabled > a:hover, .pagination ul > .disabled > a:focus {
|
|
color: #999;
|
|
cursor: default;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.pagination .page-padding {
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
/* Tiled grid
|
|
---------------*/
|
|
.tiled_header {
|
|
background: #fff;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
color: #000;
|
|
clear: both;
|
|
float: left;
|
|
margin: 0 0 1.5% 0;
|
|
font: 400 18px/2.2 "Open Sans", sans-serif;
|
|
padding: 6px 22px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tiled_grid {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.tiled_grid div.landscape, .tiled_grid div.portrait, .tiled_grid div.panorama,
|
|
.tiled_grid div.duo, .tiled_grid div.single {
|
|
background: #fff;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
float: left;
|
|
line-height: 0;
|
|
margin: 0 3.5% 3.5% 0;
|
|
overflow: none;
|
|
position: relative;
|
|
width: 31%;
|
|
}
|
|
.tiled_grid div img {
|
|
border: none;
|
|
width: 100%;
|
|
}
|
|
.tiled_grid div h4 {
|
|
color: #000;
|
|
margin: 0;
|
|
font: 400 18px "Open Sans", sans-serif;
|
|
padding: 15px 5px;
|
|
text-overflow: ellipsis;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.tiled_grid div a {
|
|
text-decoration: none;
|
|
}
|
|
.tiled_grid div.landscape:hover, .tiled_grid div.portrait:hover, .tiled_grid div.panorama:hover,
|
|
.tiled_grid div.duo:hover, .tiled_grid div.single:hover {
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* Panoramas */
|
|
.tiled_grid div.panorama, .tiled_grid .tiled_row {
|
|
clear: both;
|
|
float: left;
|
|
width: 100%;
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* Tiling: one landscape, two tiles */
|
|
.tiled_row .column_landscape {
|
|
float: left;
|
|
width: 65.5%;
|
|
margin: 0 3.5% 3.5% 0;
|
|
}
|
|
.tiled_row .column_landscape div {
|
|
width: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
.tiled_row .column_tiles_two {
|
|
float: left;
|
|
width: 31%;
|
|
}
|
|
.tiled_row .column_tiles_two div {
|
|
float: left;
|
|
width: 100%;
|
|
margin: 0 0 10% 0;
|
|
}
|
|
|
|
/* Tiling: big portrait, four tiles */
|
|
.tiled_row .column_portrait {
|
|
float: left;
|
|
width: 31%;
|
|
margin: 0 3.5% 3.5% 0;
|
|
}
|
|
.tiled_row .column_portrait div {
|
|
width: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
.tiled_row .column_tiles_four {
|
|
float: left;
|
|
width: 65.5%;
|
|
}
|
|
.tiled_row .column_tiles_four div {
|
|
float: left;
|
|
width: 47.45%;
|
|
margin: 0 5% 5% 0;
|
|
}
|
|
|
|
/* Tiling: two tiles */
|
|
.tiled_row .duo {
|
|
width: 48.25% !important;
|
|
}
|
|
|
|
/* Tiling: one tile */
|
|
.tiled_row .single {
|
|
width: 48.25% !important;
|
|
}
|
|
|
|
/* Tiling: remove horizontal margin at end of row. */
|
|
.tiled_row > div:nth-child(3n),
|
|
.tiled_row > .duo:nth-child(2) {
|
|
margin-right: 0 !important;
|
|
}
|
|
.tiled_row .column_tiles_four > div:nth-child(2n) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* Tiling: switch places for odd rows */
|
|
.tiled_row:nth-child(odd) .column_landscape,
|
|
.tiled_row:nth-child(odd) .column_portrait {
|
|
float: right;
|
|
margin: 0 0 3.5% 3.5%;
|
|
}
|
|
.tiled_row:nth-child(odd) .column_tiles_four {
|
|
float: right;
|
|
}
|
|
.tiled_row:nth-child(odd) .column_tiles_two {
|
|
float: right;
|
|
}
|
|
|
|
|
|
/* Album title boxes
|
|
----------------------*/
|
|
.album_title_box {
|
|
margin-left: -46px;
|
|
width: 100%;
|
|
}
|
|
.album_title_box > a {
|
|
background: #fff;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
display: inline-block;
|
|
float: left;
|
|
font-size: 2em;
|
|
line-height: 1;
|
|
padding: 8px 10px 14px;
|
|
}
|
|
.album_title_box > div {
|
|
background: #fff;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
float: left;
|
|
font: inherit;
|
|
padding: 6px 22px;
|
|
max-width: 90%;
|
|
margin: 0 0 1.5% 0;
|
|
}
|
|
.album_title_box h2 {
|
|
color: #262626;
|
|
font: 400 18px/2 "Open Sans", sans-serif !important;
|
|
margin: 0;
|
|
}
|
|
.album_title_box p {
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
|
|
/* Album button box
|
|
---------------------*/
|
|
.album_button_box {
|
|
float: right;
|
|
margin-bottom: 20px;
|
|
}
|
|
.album_button_box > a {
|
|
background: #fff;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
display: inline-block;
|
|
float: left;
|
|
font-size: 1em;
|
|
padding: 8px 10px;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
|
|
/* Generic boxed content
|
|
--------------------------*/
|
|
.boxed_content {
|
|
background: #fff;
|
|
padding: 25px;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
.boxed_content h2 {
|
|
font: 300 24px "Open Sans", sans-serif;
|
|
margin: 0 0 0.2em;
|
|
}
|
|
|
|
|
|
/* Error pages
|
|
----------------*/
|
|
.errormsg p {
|
|
font-size: 1.1em;
|
|
margin: 1em 0 0;
|
|
}
|
|
.errorpage .widget {
|
|
margin-top: 3%;
|
|
}
|
|
.errorpage .widget_recentposts {
|
|
margin-right: 0;
|
|
}
|
|
|
|
|
|
/* Footer
|
|
-----------*/
|
|
footer {
|
|
clear: both;
|
|
color: #fff;
|
|
font: 400 12px/1.7 "Open Sans", sans-serif;
|
|
padding: 40px 0 0;
|
|
text-align: center;
|
|
overflow: auto;
|
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
|
|
}
|
|
footer a {
|
|
color: #eee;
|
|
}
|
|
|
|
|
|
/* Input
|
|
----------*/
|
|
|
|
input, select, .btn {
|
|
background: #fff;
|
|
border: 1px solid #ccc;
|
|
color: #000;
|
|
font: 13px/1.7 "Open Sans", "Helvetica", sans-serif;
|
|
padding: 3px;
|
|
}
|
|
input[type=submit], button, .btn {
|
|
background: #ddd;
|
|
border-radius: 3px;
|
|
border: 1px solid #aaa;
|
|
display: inline-block;
|
|
font: inherit;
|
|
padding: 4px 5px;
|
|
}
|
|
input[type=submit]:hover, button:hover, .btn:hover {
|
|
background-color: #d0d0d0;
|
|
border-color: #a0a0a0;
|
|
}
|
|
textarea {
|
|
border: 1px solid #ccc;
|
|
font: 12px/1.4 'Monaco', 'Inconsolata', 'DejaVu Sans Mono', monospace;
|
|
padding: 0.75%;
|
|
width: 98.5%;
|
|
}
|
|
.btn-red {
|
|
background: #F3B076;
|
|
border-color: #C98245;
|
|
color: #000;
|
|
}
|
|
|
|
|
|
/* Login box styles
|
|
---------------------*/
|
|
#login {
|
|
background: #fff;
|
|
border: 1px solid #aaa;
|
|
border-radius: 10px;
|
|
box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
|
|
margin: 0 auto;
|
|
overflow: auto;
|
|
padding: 15px;
|
|
width: 300px;
|
|
}
|
|
#login dl *, #login button {
|
|
font-size: 15px;
|
|
line-height: 35px;
|
|
}
|
|
#login h3 {
|
|
font: 700 24px/36px "Open Sans", sans-serif;
|
|
margin: 0;
|
|
}
|
|
#login dd {
|
|
width: 96%;
|
|
margin: 0 0 10px;
|
|
}
|
|
#login input {
|
|
background: #eee;
|
|
border: 1px solid #aaa;
|
|
border-radius: 3px;
|
|
padding: 4px 5px;
|
|
width: 100%;
|
|
}
|
|
#login div.alert {
|
|
line-height: normal;
|
|
margin: 15px 0;
|
|
}
|
|
#login div.buttonstrip {
|
|
float: right;
|
|
padding: 0 0 5px;
|
|
}
|
|
#login button {
|
|
line-height: 20px;
|
|
}
|
|
|
|
|
|
/* Alert boxes -- styling borrowed from Bootstrap 2
|
|
-----------------------------------------------------*/
|
|
.alert {
|
|
padding: 8px 35px 8px 14px;
|
|
margin-bottom: 20px;
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
background-color: #fcf8e3;
|
|
border: 1px solid #fbeed5;
|
|
-webkit-border-radius: 4px;
|
|
-moz-border-radius: 4px;
|
|
border-radius: 4px;
|
|
}
|
|
.alert,
|
|
.alert h4 {
|
|
color: #c09853;
|
|
}
|
|
.alert h4 {
|
|
margin: 0;
|
|
}
|
|
.alert .close {
|
|
position: relative;
|
|
top: -2px;
|
|
right: -21px;
|
|
line-height: 20px;
|
|
}
|
|
.alert-success {
|
|
background-color: #dff0d8;
|
|
border-color: #d6e9c6;
|
|
color: #468847;
|
|
}
|
|
.alert-success h4 {
|
|
color: #468847;
|
|
}
|
|
.alert-danger,
|
|
.alert-error {
|
|
background-color: #f2dede;
|
|
border-color: #eed3d7;
|
|
color: #b94a48;
|
|
}
|
|
.alert-danger h4,
|
|
.alert-error h4 {
|
|
color: #b94a48;
|
|
}
|
|
.alert-info {
|
|
background-color: #d9edf7;
|
|
border-color: #bce8f1;
|
|
color: #3a87ad;
|
|
}
|
|
.alert-info h4 {
|
|
color: #3a87ad;
|
|
}
|
|
.alert-block {
|
|
padding-top: 14px;
|
|
padding-bottom: 14px;
|
|
}
|
|
.alert-block > p,
|
|
.alert-block > ul {
|
|
margin-bottom: 0;
|
|
}
|
|
.alert-block p + p {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
|
|
/* Styling for the photo pages
|
|
--------------------------------*/
|
|
#photo_frame {
|
|
text-align: center;
|
|
}
|
|
#photo_frame a {
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
cursor: -moz-zoom-in;
|
|
display: inline-block;
|
|
}
|
|
#photo_frame a img {
|
|
border: none;
|
|
display: block;
|
|
height: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
#previous_photo, #next_photo {
|
|
background: #fff;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
color: #262626;
|
|
font-size: 3em;
|
|
line-height: 0.5;
|
|
padding: 32px 8px;
|
|
position: fixed;
|
|
text-decoration: none;
|
|
top: 45%;
|
|
}
|
|
#previous_photo em, #next_photo em {
|
|
position: absolute;
|
|
top: -1000em;
|
|
left: -1000em;
|
|
}
|
|
span#previous_photo, span#next_photo {
|
|
opacity: 0.25;
|
|
}
|
|
a#previous_photo:hover, a#next_photo:hover {
|
|
background: #eee;
|
|
color: #000;
|
|
}
|
|
#previous_photo {
|
|
left: 0;
|
|
}
|
|
#previous_photo:before {
|
|
content: '←';
|
|
}
|
|
#next_photo {
|
|
right: 0;
|
|
}
|
|
#next_photo:before {
|
|
content: '→';
|
|
}
|
|
|
|
#sub_photo h2, #sub_photo h3, #photo_exif_box h3, #user_actions_box h3 {
|
|
font: 600 20px/30px "Open Sans", sans-serif;
|
|
margin: 0 0 10px;
|
|
}
|
|
#sub_photo h3 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
#sub_photo {
|
|
background: #fff;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
float: left;
|
|
padding: 2%;
|
|
margin: 25px 3.5% 25px 0;
|
|
width: 68.5%;
|
|
}
|
|
#sub_photo #tag_list {
|
|
list-style: none;
|
|
margin: 1em 0;
|
|
padding: 0;
|
|
}
|
|
#sub_photo #tag_list li {
|
|
display: inline;
|
|
padding-right: 0.75em;
|
|
}
|
|
#tag_list .delete-tag {
|
|
opacity: 0.25;
|
|
}
|
|
#tag_list .delete-tag:hover {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
|
|
#photo_exif_box {
|
|
background: #fff;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
margin: 25px 0 25px 0;
|
|
overflow: auto;
|
|
padding: 2%;
|
|
float: right;
|
|
width: 20%;
|
|
}
|
|
#photo_exif_box dt {
|
|
font-weight: bold;
|
|
float: left;
|
|
clear: left;
|
|
width: 120px;
|
|
}
|
|
#photo_exif_box dt:after {
|
|
content: ':';
|
|
}
|
|
#photo_exif_box dd {
|
|
float: left;
|
|
margin: 0;
|
|
}
|
|
|
|
#user_actions_box {
|
|
background: #fff;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
float: left;
|
|
margin: 25px 0 25px 0;
|
|
overflow: auto;
|
|
padding: 2%;
|
|
width: 20%;
|
|
}
|
|
|
|
/* Responsive: smartphone in portrait
|
|
---------------------------------------*/
|
|
@media only screen and (max-width: 895px) {
|
|
#wrapper, header {
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
h1#logo {
|
|
font-size: 42px;
|
|
float: none;
|
|
margin: 1em 0 0.5em;
|
|
text-align: center;
|
|
}
|
|
h1#logo:before {
|
|
float: none;
|
|
font-size: 58px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
ul#nav {
|
|
float: none;
|
|
padding: 0;
|
|
margin: 1em 0;
|
|
text-align: center;
|
|
overflow: none;
|
|
}
|
|
|
|
ul#nav li, ul#nav li a {
|
|
display: inline-block;
|
|
float: none;
|
|
}
|
|
|
|
ul#nav li a {
|
|
float: none;
|
|
font-size: 16px;
|
|
margin-left: 6px;
|
|
padding: 12px 4px;
|
|
}
|
|
|
|
.album_title_box {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.tiled_header {
|
|
font-size: 14px;
|
|
margin: 0 0 3.5% 0;
|
|
}
|
|
.tiled_grid div h4 {
|
|
font-size: 14px;
|
|
padding: 15px 5px;
|
|
}
|
|
|
|
.tiled_row > div, .tiled_row .single, .tiled_row .duo {
|
|
float: none !important;
|
|
width: 100% !important;
|
|
margin: 0 0 5% !important;
|
|
}
|
|
|
|
.tiled_row > div > div {
|
|
float: none !important;
|
|
width: 100% !important;
|
|
margin: 0 0 5% !important;
|
|
}
|
|
|
|
#previous_photo, #next_photo {
|
|
display: none;
|
|
}
|
|
|
|
#sub_photo, #photo_exif_box {
|
|
float: none;
|
|
margin: 30px 0;
|
|
padding: 10px;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
|
|
/* Upload form
|
|
----------------*/
|
|
#upload_preview_area {
|
|
margin: 10px 0;
|
|
}
|
|
#upload_preview_area > div {
|
|
display: inline-block;
|
|
margin: 0 5px 0 0;
|
|
line-height: 0;
|
|
position: relative;
|
|
}
|
|
#upload_preview_area .progress {
|
|
position: absolute;
|
|
bottom: 0;
|
|
background: rgba(200, 200, 200, 0.5);
|
|
height: 5px;
|
|
width: 100%;
|
|
}
|
|
#upload_preview_area .progress > div {
|
|
background: #2b2;
|
|
height: 5px;
|
|
width: 0%;
|
|
}
|
|
#upload_preview_area .progress .error {
|
|
background: #b22;
|
|
}
|
|
#photo_submit:disabled {
|
|
background: #ccc;
|
|
color: #777;
|
|
border-color: #aaa;
|
|
}
|
|
|
|
|
|
/* Spinner animation
|
|
----------------------*/
|
|
.spinner {
|
|
display: inline-block;
|
|
background-color: #74AFCF;
|
|
height: 20px;
|
|
width: 20px;
|
|
margin: 0 5px;
|
|
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
|
|
animation: sk-rotateplane 1.2s infinite ease-in-out;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
@-webkit-keyframes sk-rotateplane {
|
|
0% { -webkit-transform: perspective(120px) }
|
|
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
|
|
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
|
|
}
|
|
|
|
@keyframes sk-rotateplane {
|
|
0% {
|
|
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
|
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
|
|
} 50% {
|
|
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
|
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
|
|
} 100% {
|
|
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
|
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
|
}
|
|
}
|