4

Такой вопрос

Есть в дизайне блок который должен выглядеть вот так кусок дизайна кнопки которые я там отметил - должны анимироваться. если с кнопкой слева проблем особых с анимацией нажатия я не вижу, то вот кнопка справа должна регулировать громкость и должна крутиться либо мышкой, либо при нажатии. Если бы радио стояло не под углом а ровно, то проблем особых прикрутить туда анимацию вращения нет, даже статьи находил на эту тему

https://habr.com/ru/post/41894/

https://css-tricks.com/snippets/css/flip-an-image/

но пока не особо помогло. Подскажите хоть куда копать и как это реализовать?

1
  • 2
    Делайте круглую, а после добавите perspective и выставите нужный ракурс.
    – UModeL
    5 фев 2021 в 16:40

4 ответа 4

3

Теперь и эта ручка вращается колесом мыши и это сопровождается звуком скрипа. (перед этим нужно раз кликнуть в любом месте на странице) Правда, тут по нажатию кнопки выполнить код звука почеу-то нет.

*{
  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);
}
#vol{
    position:absolute;
    left: 600px;
    top: 680px;
}
<audio id=audio src="http://tolmatux.strana.de/audio/02083.mp3"></audio>
<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>
<div id=vol>громкость - 50</div>
<script>
var cog = document.getElementsByClassName("cog")[0];
var myvolume = 50, myrotate = delta1 = 0;
cog.onmousewheel = function(e){
    e = e || window.event;
    var delta = e.deltaY || e.detail || e.wheelDelta;
    myrotate += delta / 50;
    myvolume = Math.max(Math.min(50 + myrotate, 100), 0);
    cog.style = "transform: rotate3d(-1,0,0,   " + myrotate + "deg);";
    vol.innerHTML = "громкость - " + myvolume;
    if (event.preventDefault) event.preventDefault();
    if(delta != delta1){
        audio.currentTime = Math.random() * 2;
        audio.play();
        setTimeout(function(){audio.pause()}, 500);
    }
    delta1 = delta;
}
</script>

3
  • В принципе последний вариант меня вполне устраивает, проблема только с тем чтобы адаптировать его под свою задачу, признаюсь для меня верстка эта немного сложновата, непонятна хотя суть я уловил - это раз, два - непонятен момент с кликом в любом месте. с чем это связано? можно ли это обойти генерацией события клик на странице?
    – Антон
    6 фев 2021 в 18:44
  • 1
    Можно отказаться от скрипа, и тогда клик в любом месте не будет нужен. Просто убрать элемент с id=audio и все, что с ним связано в коде.
    – Опан
    6 фев 2021 в 19:11
  • 1
    Вообще, в последнем варианте HTML и CSS коды не оптимальны, можно значительно сократить количество почти одинаковых строк, что я сейчас и сделаю.
    – Опан
    6 фев 2021 в 19:51
3

До идеала еще очень далеко, но на скорую руку накидал вам готовый прототип.

*{
  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>

Надеюсь, код JS из вашего примера прикрутите самостоятельно, вроде не сложный.

2
  • Сложноват CSS, чтобы прикрутить JS. Есть ли там строка, отвечающая за угловую позицию всей ручки? Изначально ручка должна стоять на месте.
    – Опан
    6 фев 2021 в 11:34
  • Остановить мне удалось, теперь прикрутить.
    – Опан
    6 фев 2021 в 11:47
3

Теперь стало меньше строк:

*{
  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-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);
}
#vol{
    position:absolute;
    left: 600px;
    top: 680px;
}
#audio{
    position: absolute;
    left: 530px;
    top: 300px;
    border-style: dotted;
    border-width: 7px;
    border-color: #811;
    border-radius: 35px 35px 10px 10px;
    height: 80px;
    transition: 1s;
}
#audio:hover{
    border-color: #f77;
}
<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-24"><div class="panel"><div class="arrow"></div></div></div>
    </div>
  </div>
</div>
<audio id=audio volume = 0.41 src="https://listen6.myradio24.com/sazdan" crossorigin="anonymous" controls></audio>
<div id=vol>громкость - 50</div>
<script>
var cog = document.getElementsByClassName("cog")[0];
for(i = 1; i < 24; i ++){
    var mydiv = document.createElement("div");
    mydiv.className = "segment";
    mydiv.style = "transform: rotate3d(1,0,0,calc(180deg -  " + i + " * 15deg));";
    var mydiv1 = document.createElement("div");
    mydiv1.className = "panel";
    mydiv.appendChild(mydiv1);
    cog.appendChild(mydiv);
}
var myvolume = 50, myrotate = delta1 = 0;
cog.onmousewheel = function(e){
    e = e || window.event;
    var delta = e.deltaY || e.detail || e.wheelDelta;
    myrotate += delta / 50;
    myvolume = Math.max(Math.min(50 + myrotate, 100), 0);
    audio.volume = Math.pow(1.0069, myvolume) - 1;
    cog.style = "transform: rotate3d(-1,0,0,   " + myrotate + "deg);";
    vol.innerHTML = "громкость - " + myvolume;
    if (event.preventDefault) event.preventDefault();
}
</script>

Правда, тут, на форуме абсолютное позиционирование элементов выглядит совсем по-другому.

7
  • Использовать .style - не самая лучшая идея. Куда эффективнее распаковывать стили в тег <style>.
    – DiD
    7 фев 2021 в 1:50
  • Но тут речь идёт о целом цикле из 24 программно созданных с помощью JS .style. Иначе в теге <style> ... </style> приходится писать 24 почти одинаковые строки.
    – Опан
    7 фев 2021 в 8:53
  • Так стили можно генерировать с помощью JS также как и стили к тегам. После генерации создать тэг <style>, через .innerHTML поместить стили и добавить этот тег в конец <head>.
    – DiD
    7 фев 2021 в 13:53
  • А так, в реальных событиях, само собой разумеется, статичные теги лучше всего генерировать шаблонизатором html. Например, в pug есть циклы. А стили шаблонизатором css. Например, в том же less есть циклы тоже.
    – DiD
    7 фев 2021 в 14:01
  • Чувствую. что всё это полезно, но жаль, что на английском. Ладно, попытаюсь изучить.
    – Опан
    7 фев 2021 в 20:59
2

Ручка вращается с помощью колеса мыши.

<style>
#myimg{
    transform: rotate(15deg);
    width: 100px;
    height: 100px;
    text-align: center;
}
#mydiv{
    transform: skewX(15deg);
}
</style>
<audio id=audio volume = 0.41 src="https://listen6.myradio24.com/sazdan" crossorigin="anonymous" controls></audio>
<div id=mydiv>
    <div><img id=myimg src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQaiiizF1Y0TKp0S0wMa1vwRZ-vpXBd7lfkvA&usqp=CAU" width=100 height=100/></div>
</div>
<div id=vol>громкость - 50</div>
<script>
var myvolume = 50;
var myrotate = 0;
myimg.onmousewheel = function(e){
    e = e || window.event;
    var delta = e.deltaY || e.detail || e.wheelDelta;
    myrotate += delta / 50;
    myvolume = Math.max(Math.min(50 + myrotate, 100), 0);
    audio.volume = Math.pow(1.0069, myvolume) - 1;
    myimg.style = "transform: rotate(" + myrotate + "deg);";
    vol.innerHTML = "громкость - " + myvolume;
if (event.preventDefault)  event.preventDefault();
event.returnValue = false;
};
</script>

Тут и вращение и общий наклон. Изображение ручки желательно найти в формате GIF с прозрачным фоном, чтобы во время вращения он не перекрывал соседние элементы страницы.

5
  • Криво вращается. Кажется, надо трансформации переставить или повесить на разные элементы.
    – Qwertiy
    6 фев 2021 в 1:55
  • а разве не подойдет png?
    – Антон
    6 фев 2021 в 7:12
  • @Антон Когда вращаешь ручку мышкой виден белый фон от этого эффект реализма пропадает.
    – Leks
    6 фев 2021 в 9:59
  • 1
    Поэтому нужен гиф с прозрачным фоном, может ещё подойдёт png, не знаю.
    – Опан
    6 фев 2021 в 10:26
  • 1
    @Антон, подойдёт - png отлично умеет прозрачность. А вот jpg - нет.
    – Qwertiy
    8 фев 2021 в 1:14

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.