Difference between revisions of "MediaWiki:Common.css"
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
+ | @keyframes wd-cube-rot { | ||
+ | from { transform: rotateX(-20deg) rotateY(0); } | ||
+ | to { transform: rotateX(-20deg) rotateY(360deg); } | ||
+ | } | ||
+ | |||
+ | #wd-cube-3d { | ||
+ | perspective: 800px; | ||
+ | perspective-origin: 50px 50px; | ||
+ | } | ||
+ | |||
+ | #wd-cube { | ||
+ | position: relative; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | transform-style: preserve-3d; | ||
+ | animation: wd-cube-rot 2s infinite linear; | ||
+ | } | ||
+ | |||
+ | #wd-cube div { | ||
+ | position: absolute; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | background-image: url("side.png"); | ||
+ | } | ||
+ | |||
+ | #wdcube-front { | ||
+ | transform: translateZ(50px); | ||
+ | background-image: url("front.png") !important; | ||
+ | } | ||
+ | |||
+ | #wdcube-back { | ||
+ | transform: translateZ(-50px) rotateY(180deg); | ||
+ | } | ||
+ | |||
+ | #wdcube-left { | ||
+ | transform: translateX(-50px) rotateY(-90deg); | ||
+ | } | ||
+ | |||
+ | #wdcube-right { | ||
+ | transform: translateX(50px) rotateY(90deg); | ||
+ | } | ||
+ | |||
+ | #wdcube-top { | ||
+ | transform: translateY(-50px) rotateX(-90deg); | ||
+ | } | ||
+ | |||
+ | #wdcube-wd { | ||
+ | padding-left: 20px; | ||
+ | } |
Revision as of 00:19, 16 February 2018
/* CSS placed here will be applied to all skins */
@keyframes wd-cube-rot {
from { transform: rotateX(-20deg) rotateY(0); }
to { transform: rotateX(-20deg) rotateY(360deg); }
}
#wd-cube-3d {
perspective: 800px;
perspective-origin: 50px 50px;
}
#wd-cube {
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
animation: wd-cube-rot 2s infinite linear;
}
#wd-cube div {
position: absolute;
width: 100px;
height: 100px;
background-image: url("side.png");
}
#wdcube-front {
transform: translateZ(50px);
background-image: url("front.png") !important;
}
#wdcube-back {
transform: translateZ(-50px) rotateY(180deg);
}
#wdcube-left {
transform: translateX(-50px) rotateY(-90deg);
}
#wdcube-right {
transform: translateX(50px) rotateY(90deg);
}
#wdcube-top {
transform: translateY(-50px) rotateX(-90deg);
}
#wdcube-wd {
padding-left: 20px;
}