*{
margin: 0; padding: 0; box-sizing: border-box;
perspective-origin: center; transform-style: preserve-3d;
}
body{ width: 100vw; height: 100vh; perspective: 1000vh; }
.viewport { width: 100vw; height: 100vh; perspective: 1000vh; }
.holder {
position:absolute; width:200px; height:200px;
left: calc(50vw - 100px); top: calc(50vh - 100px);
transform: rotate3d(0,1,0,60deg);
}
.cog {
position: absolute; width:200px; height:200px;
animation: spin-counter 10s linear infinite;
}
#direction { display:none; }
#direction:checked + .viewport > .holder >.cog{
animation: spin-clockwise 10s linear infinite;
}
.toggle{
position: absolute;
display:block;
width:200px; height:200px;
transform: translateZ(-2px);
}
.panel{
position:absolute;
background: linear-gradient(#888 0%, #999 25%,
#ccc 25%, #ddd 50%,
#ccc 75%, #999 75%,
#888 100%);
width:200px; height:26px;
top: calc(100px - 13px);
transform: rotate3d(1,0,0,-90deg) translateZ(100px);
}
.segment { position:absolute; width:200px; height:200px; }
.segment-01{transform: rotate3d(1,0,0,calc(180deg - 1 * 15deg));}
.segment-02{transform: rotate3d(1,0,0,calc(180deg - 2 * 15deg));}
.segment-03{transform: rotate3d(1,0,0,calc(180deg - 3 * 15deg));}
.segment-04{transform: rotate3d(1,0,0,calc(180deg - 4 * 15deg));}
.segment-05{transform: rotate3d(1,0,0,calc(180deg - 5 * 15deg));}
.segment-06{transform: rotate3d(1,0,0,calc(180deg - 6 * 15deg));}
.segment-07{transform: rotate3d(1,0,0,calc(180deg - 7 * 15deg));}
.segment-08{transform: rotate3d(1,0,0,calc(180deg - 8 * 15deg));}
.segment-09{transform: rotate3d(1,0,0,calc(180deg - 9 * 15deg));}
.segment-10{transform: rotate3d(1,0,0,calc(180deg - 10 * 15deg));}
.segment-11{transform: rotate3d(1,0,0,calc(180deg - 11 * 15deg));}
.segment-12{transform: rotate3d(1,0,0,calc(180deg - 12 * 15deg));}
.segment-13{transform: rotate3d(1,0,0,calc(180deg - 13 * 15deg));}
.segment-14{transform: rotate3d(1,0,0,calc(180deg - 14 * 15deg));}
.segment-15{transform: rotate3d(1,0,0,calc(180deg - 15 * 15deg));}
.segment-16{transform: rotate3d(1,0,0,calc(180deg - 16 * 15deg));}
.segment-17{transform: rotate3d(1,0,0,calc(180deg - 17 * 15deg));}
.segment-18{transform: rotate3d(1,0,0,calc(180deg - 18 * 15deg));}
.segment-19{transform: rotate3d(1,0,0,calc(180deg - 19 * 15deg));}
.segment-20{transform: rotate3d(1,0,0,calc(180deg - 20 * 15deg));}
.segment-21{transform: rotate3d(1,0,0,calc(180deg - 21 * 15deg));}
.segment-22{transform: rotate3d(1,0,0,calc(180deg - 22 * 15deg));}
.segment-23{transform: rotate3d(1,0,0,calc(180deg - 23 * 15deg));}
.segment-24{transform: rotate3d(1,0,0,calc(180deg - 24 * 15deg));}
.front{
position: absolute; background: #cccf;
width:200px; height:200px; border-radius: 100px;
transform: rotate3d(0,1,0,90deg) translateZ(-100px);
}
.back{
position: absolute; background: #333; border-radius: 125px;
width:250px; height:250px; top: -25px; left: -25px;
transform: rotate3d(0,1,0,90deg) translateZ(100px);
}
.arrow {
position: absolute; background: #f00;
width: 5px; height: 50px; left: 97.5px; top: 0px;
}
.segment .arrow{
height: 5px; width: 200px; left: 0; top: 10.5px;
}
.front .arrow{ transform: translateZ(-1px); }
.back .arrow{ height: 25px; left: 122.5px; }
.glare{
position: absolute; border-radius: 100px;
background: conic-gradient(#bbb4 0, #fff4 45deg, #bbb4 90deg,
#fff4 135deg,#bbb4 180deg, #fff4 225deg,
#bbb4 270deg,#fff4 315deg, #bbb4 360deg);
width:200px; height:200px; left: 0; top: 0;
transform: rotate3d(0,1,0,90deg) translateZ(-100.5px);
}
@keyframes spin-counter {
from{ transform: rotate3d(-1,0,0, 0deg); }
to{ transform: rotate3d(-1,0,0,-360deg); }
}
@keyframes spin-clockwise {
from{ transform: rotate3d(1,0,0, 0deg); }
to{ transform: rotate3d(1,0,0,-360deg); }
}
<input type="checkbox" id="direction"/>
<div class="viewport">
<div class="holder">
<div class="glare"></div>
<div class="cog">
<div class="front">
<label class="toggle" for="direction"></label>
<div class="arrow"></div>
</div>
<div class="back"><div class="arrow"></div></div>
<div class="segment segment-01"><div class="panel"></div></div>
<div class="segment segment-02"><div class="panel"></div></div>
<div class="segment segment-03"><div class="panel"></div></div>
<div class="segment segment-04"><div class="panel"></div></div>
<div class="segment segment-05"><div class="panel"></div></div>
<div class="segment segment-06"><div class="panel"></div></div>
<div class="segment segment-07"><div class="panel"></div></div>
<div class="segment segment-08"><div class="panel"></div></div>
<div class="segment segment-09"><div class="panel"></div></div>
<div class="segment segment-10"><div class="panel"></div></div>
<div class="segment segment-11"><div class="panel"></div></div>
<div class="segment segment-12"><div class="panel"></div></div>
<div class="segment segment-13"><div class="panel"></div></div>
<div class="segment segment-14"><div class="panel"></div></div>
<div class="segment segment-15"><div class="panel"></div></div>
<div class="segment segment-16"><div class="panel"></div></div>
<div class="segment segment-17"><div class="panel"></div></div>
<div class="segment segment-18"><div class="panel"></div></div>
<div class="segment segment-19"><div class="panel"></div></div>
<div class="segment segment-20"><div class="panel"></div></div>
<div class="segment segment-21"><div class="panel"></div></div>
<div class="segment segment-22"><div class="panel"></div></div>
<div class="segment segment-23"><div class="panel"></div></div>
<div class="segment segment-24"><div class="panel"><div class="arrow"></div></div></div>
</div>
</div>
</div>
perspective
и выставите нужный ракурс.