HTML clock

[stefanmz]

hey so I am making a clock and I positioned my arrows to be in the center of it and now I am going to use transform:rotate to rotate and animate them but I used transform-origin to set the axis around which they rotate(the point). However they still rotate freely not around that point. why is that?

/*HTML*/
<div id="Clock">
		<img src="clockface.jpg">
		<hr id="seconds">
		<hr id="minutes">
		<hr id="hours">
	</div>
/*CSS*/
*{
	margin: 0px;
	padding: 0px;
}
img{
	height: 300px;
	border: 10px solid black;
	border-radius: 50%;
	margin-left: 10px;
	margin-top: 10px;	
}
#Clock{
	width: 300px;
	height: 300px;
}
#seconds{
	background: red;
	height: 1px;
	border: 0px;
	width: 100px;
	position: absolute;
	top: 170px;
	left: 170px;
}
#minutes{
	background: black;
	height: 2px;
	border: 0px;
	width: 50px;
	position: fixed;
	top: 148px;
	left: 157px;
	transform-origin: 26px 3px;
	transform: rotate(-60deg);
	
}

 

 

[CJPowell27]

I looks like you are only trying to rotate the minutes, is that correct? Often times transform-origin has issues with being in a certain CSS style card. It is also good form to do something like

-moz-transform-origin: 26px 3px;
-ms-transform-origin:  26px 3px;
-o-transform-origin: 26px 3px;
-webkit-transform-origin:  26px 3px;
transform-origin: 26px 3px;

to allow for more browser compatibility. 

[stefanmz]

3 hours ago, CJPowell27 said:

I looks like you are only trying to rotate the minutes, is that correct? Often times transform-origin has issues with being in a certain CSS style card. It is also good form to do something like

-moz-transform-origin: 26px 3px;
-ms-transform-origin:  26px 3px;
-o-transform-origin: 26px 3px;
-webkit-transform-origin:  26px 3px;
transform-origin: 26px 3px;

to allow for more browser compatibility. 

hmm tried but same thing

 

[stefanmz]

anyway clock is done. I figured it out. moral of story:don't use px use %