Difference between revisions of "MediaWiki:Common.css"
(Created page with "→CSS placed here will be applied to all skins: .responsive-1 { width: 320px; height: 50px; } @media(min-width: 500px) { .responsive-1 { width: 468px; height: 60px; } } @me...") |
|||
(6 intermediate revisions by the same user not shown) | |||
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 { | |
− | + | 0% { transform: rotateX(-20deg) rotateY(40deg); } | |
− | + | 90% { transform: rotateX(-20deg) rotateY(40deg); } | |
+ | 100% { transform: rotateX(-20deg) rotateY(400deg); } | ||
+ | } | ||
+ | |||
+ | #wd-cube-3d { | ||
+ | padding: 20px; | ||
+ | perspective: 800px; | ||
+ | perspective-origin: 50px 50px; | ||
+ | } | ||
+ | |||
+ | #wd-cube { | ||
+ | position: relative; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | transform-style: preserve-3d; | ||
+ | animation: wd-cube-rot 10s infinite linear; | ||
+ | } | ||
+ | |||
+ | #wd-cube div { | ||
+ | position: absolute; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | background-image: url("/ShareX/wdcube-side.png"); | ||
+ | } | ||
+ | |||
+ | #wdcube-front { | ||
+ | transform: translateZ(50px); | ||
+ | background-image: url("/ShareX/wdcube-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; | ||
+ | } |
Latest revision as of 00:27, 16 February 2018
/* CSS placed here will be applied to all skins */
@keyframes wd-cube-rot {
0% { transform: rotateX(-20deg) rotateY(40deg); }
90% { transform: rotateX(-20deg) rotateY(40deg); }
100% { transform: rotateX(-20deg) rotateY(400deg); }
}
#wd-cube-3d {
padding: 20px;
perspective: 800px;
perspective-origin: 50px 50px;
}
#wd-cube {
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
animation: wd-cube-rot 10s infinite linear;
}
#wd-cube div {
position: absolute;
width: 100px;
height: 100px;
background-image: url("/ShareX/wdcube-side.png");
}
#wdcube-front {
transform: translateZ(50px);
background-image: url("/ShareX/wdcube-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;
}