Если вот сделать часы через transform rotate, то будет вот

Question

Если вот сделать часы через transform rotate, то будет вот

так, а реально сделать, чтобы цифры смотрели прямо? нижняя 6 выглядит как 9
наверное надо делать родительский контейнер и уже его крутить в обратную сторону 😅

#css #frontend #html #programming #russian

0

09.02.2023

9 ответов

25 просмотров

@DS 🎭 Автор вопроса

не совсем, я пробую сделать циферблат, сами стрелки там как раз не особо нужны, там больше вот сегменты + циферблат, сегменты так сяк уже разобрался. а вот циферблат не получается что-то, я делаю цифры abolute + transform rotate, да они круг делают, но они переворачиваются. мне нужно, чтобы они круг делали, но не переварачивались, я думал сделать внутри контейнер и как-то в противоположную сторону крутить, но что-то не особо оно получается) https://codesandbox.io/s/nostalgic-tree-cphxfz?file=/index.html

0

09.02.2023

@DS 🎭 Автор вопроса

Paul West
а раскидать через calc и sin(), cos() - не вариант...

о, буду пробовать) только как их задать?

0

09.02.2023

@DS 🎭 Автор вопроса

Paul West
а раскидать через calc и sin(), cos() - не вариант...

var degToMin = 360/60; // 6 var minDeg = min * degToMin; // this will tell us how many degrees around the circle the minutes are var minRad = minDeg * (Math.PI/180); // convert to radians var x = j*Math.cos(minRad); // cos is the x coord, while sin is the y coord var y = j*Math.sin(minRad); что-то такое?)

0

09.02.2023

Paul West

@DS 🎭
о, буду пробовать) только как их задать?

угол - кратный PI / 6 ну, например, для тройки: <div class="number" style="transform: translate(calc(cos(pi * 1.5 + (pi / 6) * 3) * 80px + 100px), calc(sin(pi * 1.5 + (pi / 6) * 3) * 80px + 100px))">3</div> перевод из полярных координат для радиуса 80 пикселей, плюс координаты центра (100, 100)

0

09.02.2023

@DS 🎭 Автор вопроса

Paul West
угол - кратный PI / 6 ну, например, для тройки: <...

понял, думаю разберусь

0

09.02.2023

Paul West

@DS 🎭
понял, думаю разберусь

ну, а если через js - то еще легче ))

0

09.02.2023