More actions
No edit summary |
No edit summary |
||
Line 35: | Line 35: | ||
-ms-perspective: 600px; | -ms-perspective: 600px; | ||
perspective: 600px; | perspective: 600px; | ||
} | |||
nav ul li a { | |||
width: 100px; | |||
height: 100px; | |||
float: left; | |||
margin: 0 10px; | |||
-webkit-perspective: 600px; | |||
-moz-perspective: 600px; | |||
-ms-perspective: 600px; | |||
perspective: 600px; | |||
} | |||
nav ul li:hover .front { | |||
-webkit-transform: rotateX(0deg) rotateY(180deg); | |||
-moz-transform: rotateX(0deg) rotateY(180deg); | |||
-ms-transform: rotateX(0deg) rotateY(180deg); | |||
-o-transform: rotateX(0deg) rotateY(180deg); | |||
} | |||
nav ul li .back { | |||
position: absolute; | |||
top: 0; | |||
width: inherit; | |||
height: inherit; | |||
text-align: center; | |||
z-index: -1; | |||
-webkit-transform: rotateX(0deg) rotateY(-180deg); | |||
-moz-transform: rotateX(0deg) rotateY(-180deg); | |||
-ms-transform: rotateX(0deg) rotateY(-180deg); | |||
-o-transform: rotateX(0deg) rotateY(-180deg); | |||
-webkit-transition: all 0.5s ease-in-out; | |||
-moz-transition: all 0.5s ease-in-out; | |||
-ms-transition: all 0.5s ease-in-out; | |||
-o-transition: all 0.5s ease-in-out; | |||
transition: all 0.5s ease-in-out; | |||
-webkit-backface-visibility: hidden; | |||
-moz-backface-visibility: hidden; | |||
-ms-backface-visibility: hidden; | |||
-o-backface-visibility: hidden; | |||
backface-visibility: hidden; | |||
-webkit-transform-style: preserve-3d; | |||
-moz-transform-style: preserve-3d; | |||
-o-transform-style: preserve-3d; | |||
transform-style: preserve-3d; | |||
} | |||
nav ul li:hover .back { | |||
z-index: 1; | |||
-webkit-transform: rotateX(0deg) rotateY(0deg); | |||
-moz-transform: rotateX(0deg) rotateY(0deg); | |||
-ms-transform: rotateX(0deg) rotateY(0deg); | |||
-o-transform: rotateX(0deg) rotateY(0deg); | |||
} | } |
Revision as of 20:39, 1 October 2015
/* CSS placed here will be applied to all skins */
/*h1 { font-size: 2em; }*/
/*h2 { font-size: 2em; }*/
/*h3 { font-size: 2em; }*/
/*h4 { font-size: 2em; }*/
/*h5 { font-size: 2em; }*/
/*h6 { font-size: 2em; }*/
/* {font-size:15px}*/
/* {font-family:Georgia}*/
/* {text-align:center }*/
.button:hover
{
background: #d6d6d6;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
text-shadow: 2px 2px 2px #636363;
border-radius: 5px;
color: #000000 !important;
text-transform: none !important;
}
nav ul li a {
width: 100px;
height: 100px;
float: left;
margin: 0 10px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
}
nav ul li a {
width: 100px;
height: 100px;
float: left;
margin: 0 10px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
}
nav ul li:hover .front {
-webkit-transform: rotateX(0deg) rotateY(180deg);
-moz-transform: rotateX(0deg) rotateY(180deg);
-ms-transform: rotateX(0deg) rotateY(180deg);
-o-transform: rotateX(0deg) rotateY(180deg);
}
nav ul li .back {
position: absolute;
top: 0;
width: inherit;
height: inherit;
text-align: center;
z-index: -1;
-webkit-transform: rotateX(0deg) rotateY(-180deg);
-moz-transform: rotateX(0deg) rotateY(-180deg);
-ms-transform: rotateX(0deg) rotateY(-180deg);
-o-transform: rotateX(0deg) rotateY(-180deg);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
nav ul li:hover .back {
z-index: 1;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg);
-o-transform: rotateX(0deg) rotateY(0deg);
}