CSS: создание часов с граничным радиусом

Я решил попробовать создать аналоговые 12-часовые часы с некоторыми базовыми свойствами CSS. Я начинаю с создания квадратного div 500px. Затем я устанавливаю радиус границы 250px и получаю красивый круг. После этого я добавляю в двенадцать галочек, устанавливаю их абсолютное и получаю соответствующие позиции.CSS: создание часов с граничным радиусом

Угол для каждой отметки основан на этом (извинениях за изложив простую математика):

12 делений
360 ° в нашем кругу
360/12 = 30 ° углы

Позиция для каждой отметки может быть рассчитана с использованием некоторой базовой тригонометрии. Я знаю θ (0 °, 30 °, 60 ° и т. Д.) И радиус (250), и используя cos и sin, я могу определить соответствующие значения сверху, снизу, слева и справа. Чтобы получить левое или правое значение (x), я могу просто использовать: r * sin θ. Чтобы получить верхнее или нижнее значение (y), я могу использовать: r - (r * cos θ). Надеемся, что изображение ниже (извините недостаток мастерства MS Paint) может помочь прояснить, что я пытаюсь сделать.

Image below

После того, как у меня есть эти уравнения, становится намного легче получить соответствующий х и у значения:

θ (angle) | 250 * sin θ [x] | 250 - (250 * cos θ) [y] 
-------------------------------------------------------------- 
    30° (1:00) | right: 125px |  top: 33.5px 
    60° (2:00) | right: 33.5px |  top: 125px 
    90° (3:00) | right: 0px  |  top: 250px 
    120° (4:00) | right: 33.5px |  bottom: 125px 
    150° (5:00) | right: 125px |  bottom: 33.5px 
    180° (6:00) | right: 250px |  bottom: 0px 
    210° (7:00) | left: 125px  |  bottom: 33.5px 
    240° (8:00) | left: 33.5px |  bottom: 125px 
    270° (9:00) | left: 0px  |  bottom: 250px 
    300° (10:00) | left: 33.5px |  top: 125px 
    330° (11:00) | left: 125px  |  top: 33.5px 
    360° (12:00) | left: 250px  |  top: 0px

Теперь, когда я потащил вопрос о слишком долго .. мой вопрос в том, почему все мои отметки на 2, 3, 4, 8, 9 и 10 будут немного отключены? Основываясь на моих расчетах (я всегда хотел сказать это), у меня не должно быть этих проблем. Конечно, я сделал несколько закруглений и оставил некоторые сиг-фиги, но они не настолько важны, чтобы сделать позиционирование неудобным. Вот мой код:

HTML-

<body> 
    <div id="clock"> 
     <div id="one" class="oneEleven tick"></div> 
     <div id="two" class="twoTen tick"></div> 
     <div id="three" class="threeNine tick"></div> 
     <div id="four" class="fourEight tick"></div> 
     <div id="five" class="fiveSeven tick"></div> 
     <div id="six" class="sixTwelve tick"></div> 
     <div id="seven" class="fiveSeven tick"></div> 
     <div id="eight" class="fourEight tick"></div> 
     <div id="nine" class="threeNine tick"></div> 
     <div id="ten" class="twoTen tick"></div> 
     <div id="eleven" class="oneEleven tick"></div> 
     <div id="twelve" class="sixTwelve tick"></div> 
    </div> 
</body>

CSS-

#clock { 
    height: 500px; 
    width: 500px; 
    border-radius: 50%; 
    border: 1px solid black; 
    position: relative; 
} 

.tick { 
    background-color: black; 
    height: 20px; 
    width: 5px; 
    position: absolute; 
} 

.oneEleven { 
    /* ~6.7% */ 
    top: 33.5px; 
} 

.twoTen { 
    /* 25% */ 
    top: 125px; 
} 

.threeNine { 
    /* 50% */ 
    top: 250px; 
} 

.fourEight { 
    /* 25% */ 
    bottom: 125px; 
} 

.fiveSeven { 
    /* ~6.7% */ 
    bottom: 33.5px; 
} 

#one { 
    right: 125px; 
    transform: rotate(30deg); 
} 

#two { 
    /* ~93.3% */ 
    right: 33.5px; 
    transform: rotate(60deg); 
} 

#three { 
    right: 0px; 
    transform: rotate(90deg); 
} 

#four { 
    right: 33.5px; 
    transform: rotate(120deg); 
} 

#five { 
    right: 125px; 
    transform: rotate(150deg); 
} 

#six { 
    left: 250px; 
    bottom: 0px; 
} 

#seven { 
    left: 125px; 
    transform: rotate(-150deg); 
} 

#eight { 
    left: 33.5px; 
    transform: rotate(-120deg); 
} 

#nine { 
    left: 0px; 
    transform: rotate(-90deg); 
} 

#ten { 
    left: 33.5px; 
    transform: rotate(-60deg); 
} 

#eleven { 
    left: 125px; 
    transform: rotate(-30deg); 
} 

#twelve { 
    left: 250px; 
    top: 0px; 
}

jsFiddle. Это не совсем очевидно с первого взгляда, но если вы посмотрите на отметки, которые я указал, вы увидите, что они не выстроились в круг. В конце концов, я перейду к процентам, но я хотел бы знать, почему они отключены, и это лучший подход для создания круга, который вы хотели бы добавить в стиль? Я понимаю, что есть HTML5 canvas tag, но я чувствую, что было бы слишком сложно работать и будет делать больше обработки, чем мне нужно ...

Любая помощь будет оценена!

источник

2013-04-29 incutonez

Вы также можете попробовать сделать что-то вроде этого http: // stackoverflow.com/questions/12813573/position-icons-in-circle/12817454 # 12817454 Вам даже не нужно вычислять sin & cos для каждого угла таким образом. Кроме того, вы можете генерировать отметки через JS, например, это http://codepen.io/thebabydino/pen/qgoBL – Ana

Похоже, вы разместили каждый тик, чтобы получить один угол в правильном положении на круге. Но затем галочка поворачивается вокруг начала координат, которая толкает часть за пределы круга. Вы должны быть в состоянии исправить это, установив трансформационное происхождение соответствующим образом для каждого тика. Вам нужно вращаться примерно в том же уголке, который вы разместили. Поэтому, если вы позиционируете сверху и справа, установите для начала преобразования значение «top right». Например:

#two { 
    /* ~93.3% */ 
    right: 33.5px; 
    transform: rotate(60deg); 
    transform-origin: top right; 
}

источник

2013-04-29 15:34:40

Вау, я не понимал, что существует свойство transform-origin ... все это объяснение для такого легкого исправить! Благодарю. Любое понимание того, какой подход (CSS или HTML/JS) для построения круга? – incutonez

CSS: создание часов с граничным радиусом

ответ

Смежные вопросы