mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-31 03:50:16 +00:00
93 lines
1.7 KiB
CSS
93 lines
1.7 KiB
CSS
|
|
||
|
|
|
||
|
|
.gear {
|
||
|
|
position: relative;
|
||
|
|
width: 35px;
|
||
|
|
height: 35px;
|
||
|
|
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
border: solid black 1px;
|
||
|
|
border-radius: 50%;
|
||
|
|
|
||
|
|
cursor: hand;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gear > div {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
|
||
|
|
-webkit-transform-origin: 50% 50%;
|
||
|
|
-moz-transform-origin: 50% 50%;
|
||
|
|
-o-transform-origin: 50% 50%;
|
||
|
|
-ms-transform-origin: 50% 50%;
|
||
|
|
transform-origin: 50% 50%;
|
||
|
|
|
||
|
|
-webkit-transform: rotate(15deg);
|
||
|
|
-moz-transform: rotate(15deg);
|
||
|
|
-o-transform: rotate(15deg);
|
||
|
|
-ms-transform: rotate(15deg);
|
||
|
|
transform: rotate(15deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.gear .spoke {
|
||
|
|
position: absolute;
|
||
|
|
width: 20%;
|
||
|
|
height: 15%;
|
||
|
|
right: 5%;
|
||
|
|
top: 42.5%;
|
||
|
|
background: blue;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gear .spoke div {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
background: red;
|
||
|
|
|
||
|
|
-webkit-transform-origin: -125% 50%;
|
||
|
|
-moz-transform-origin: -125% 50%;
|
||
|
|
-o-transform-origin: -125% 50%;
|
||
|
|
-ms-transform-origin: -125% 50%;
|
||
|
|
transform-origin: -125% 50%;
|
||
|
|
|
||
|
|
-webkit-transform: rotate(40deg);
|
||
|
|
-moz-transform: rotate(40deg);
|
||
|
|
-o-transform: rotate(40deg);
|
||
|
|
-ms-transform: rotate(40deg);
|
||
|
|
transform: rotate(40deg);
|
||
|
|
}
|
||
|
|
.gear .spoke div:after {
|
||
|
|
display: block;
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
width: 75%;
|
||
|
|
height: 120%;
|
||
|
|
right: 25%;
|
||
|
|
top: 0;
|
||
|
|
background: red;
|
||
|
|
|
||
|
|
-webkit-transform-origin: -125% 50%;
|
||
|
|
-moz-transform-origin: -125% 50%;
|
||
|
|
-o-transform-origin: -125% 50%;
|
||
|
|
-ms-transform-origin: -125% 50%;
|
||
|
|
transform-origin: -125% 50%;
|
||
|
|
|
||
|
|
-webkit-transform: rotate(20deg);
|
||
|
|
-moz-transform: rotate(20deg);
|
||
|
|
-o-transform: rotate(20deg);
|
||
|
|
-ms-transform: rotate(20deg);
|
||
|
|
transform: rotate(20deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.gear .spoke,
|
||
|
|
.gear .spoke div,
|
||
|
|
.gear .spoke div:after {
|
||
|
|
background: black;
|
||
|
|
}
|
||
|
|
|