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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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