Pure CSS3 iPad Clock
How do I make an pure css3 ipad clock?
This is an iPad clock rendered purely in CSS3 without the use of any image. The correct time can be set by using JS but for the sake of pure CSS-ness, it was avoided for this creation. So here, three hands are drawn and then with the help of animation property, these hands are rotated from 0deg to 360deg with varying animation-duration to replicate the real clock.. What is a pure css3 ipad clock? How do you make a pure css3 ipad clock? This script and codes were developed by Adem Ilter on 11 June 2022, Saturday.
Pure CSS3 iPad Clock Previews
Pure CSS3 iPad Clock - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS3 iPad Clock</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* RESET
------------------------- */
* { margin: 0; padding: 0; }
li { list-style: none; }
body { background: #ddd; }
/* CLOCK BODY
------------------------- */
#iClock { position: relative; overflow: hidden; width: 268px; height: 268px; margin: 20px auto; background: #f8f8f8; border-radius: 268px; } /* center dot */ #iClock:after { content: ''; position: absolute; z-index: 12; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; width: 2px; height: 2px; border:1px solid #fff; background: #666; border-radius: 2px; } /* inset shadow */ #iClock:before { content: ''; position: absolute; z-index: 12; width: 100%; height: 100%; background: transparent; overflow: hidden; border-radius: 100%; -webkit-box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,.5); -moz-box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,.5); -o-box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,.5); box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,.5); }
/* MINUTE - HOUR
------------------------- */
ul#minute, ul#hour { position: absolute; z-index: 1; top: 8px; left: 8px; width: 252px; height: 252px;
}
ul#minute li, ul#hour li { position: absolute; left: 50%; top: 0; width: 2px; height: 126px; margin-left: -1px; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%;
}
ul#minute li span, ul#hour li span{ display: block; width: 100%; height: 13px; text-indent: -9999px; background:#333;
}
/* 360(deg) / 60(minute) - 6*1, 6*2, 6*3 ... */
ul#minute li:nth-child(1) { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); }
ul#minute li:nth-child(2) { -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); transform: rotate(12deg); }
ul#minute li:nth-child(3) { -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg); -o-transform: rotate(18deg); transform: rotate(18deg); }
ul#minute li:nth-child(4) { -webkit-transform: rotate(24deg); -moz-transform: rotate(24deg); -o-transform: rotate(24deg); transform: rotate(24deg); }
ul#minute li:nth-child(5) { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
ul#minute li:nth-child(6) { -webkit-transform: rotate(36deg); -moz-transform: rotate(36deg); -o-transform: rotate(36deg); transform: rotate(36deg); }
ul#minute li:nth-child(7) { -webkit-transform: rotate(42deg); -moz-transform: rotate(42deg); -o-transform: rotate(42deg); transform: rotate(42deg); }
ul#minute li:nth-child(8) { -webkit-transform: rotate(48deg); -moz-transform: rotate(48deg); -o-transform: rotate(48deg); transform: rotate(48deg); }
ul#minute li:nth-child(9) { -webkit-transform: rotate(54deg); -moz-transform: rotate(54deg); -o-transform: rotate(54deg); transform: rotate(54deg); }
ul#minute li:nth-child(10) { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); }
ul#minute li:nth-child(11) { -webkit-transform: rotate(66deg); -moz-transform: rotate(66deg); -o-transform: rotate(66deg); transform: rotate(66deg); }
ul#minute li:nth-child(12) { -webkit-transform: rotate(72deg); -moz-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); }
ul#minute li:nth-child(13) { -webkit-transform: rotate(78deg); -moz-transform: rotate(78deg); -o-transform: rotate(78deg); transform: rotate(78deg); }
ul#minute li:nth-child(14) { -webkit-transform: rotate(84deg); -moz-transform: rotate(84deg); -o-transform: rotate(84deg); transform: rotate(84deg); }
ul#minute li:nth-child(15) { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
ul#minute li:nth-child(16) { -webkit-transform: rotate(96deg); -moz-transform: rotate(96deg); -o-transform: rotate(96deg); transform: rotate(96deg); }
ul#minute li:nth-child(17) { -webkit-transform: rotate(102deg); -moz-transform: rotate(102deg); -o-transform: rotate(102deg); transform: rotate(102deg); }
ul#minute li:nth-child(18) { -webkit-transform: rotate(108deg); -moz-transform: rotate(108deg); -o-transform: rotate(108deg); transform: rotate(108deg); }
ul#minute li:nth-child(19) { -webkit-transform: rotate(114deg); -moz-transform: rotate(114deg); -o-transform: rotate(114deg); transform: rotate(114deg); }
ul#minute li:nth-child(20) { -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); }
ul#minute li:nth-child(21) { -webkit-transform: rotate(126deg); -moz-transform: rotate(126deg); -o-transform: rotate(126deg); transform: rotate(126deg); }
ul#minute li:nth-child(22) { -webkit-transform: rotate(132deg); -moz-transform: rotate(132deg); -o-transform: rotate(132deg); transform: rotate(132deg); }
ul#minute li:nth-child(23) { -webkit-transform: rotate(138deg); -moz-transform: rotate(138deg); -o-transform: rotate(138deg); transform: rotate(138deg); }
ul#minute li:nth-child(24) { -webkit-transform: rotate(144deg); -moz-transform: rotate(144deg); -o-transform: rotate(144deg); transform: rotate(144deg); }
ul#minute li:nth-child(25) { -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); -o-transform: rotate(150deg); transform: rotate(150deg); }
ul#minute li:nth-child(26) { -webkit-transform: rotate(156deg); -moz-transform: rotate(156deg); -o-transform: rotate(156deg); transform: rotate(156deg); }
ul#minute li:nth-child(27) { -webkit-transform: rotate(162deg); -moz-transform: rotate(162deg); -o-transform: rotate(162deg); transform: rotate(162deg); }
ul#minute li:nth-child(28) { -webkit-transform: rotate(168deg); -moz-transform: rotate(168deg); -o-transform: rotate(168deg); transform: rotate(168deg); }
ul#minute li:nth-child(29) { -webkit-transform: rotate(174deg); -moz-transform: rotate(174deg); -o-transform: rotate(174deg); transform: rotate(174deg); }
ul#minute li:nth-child(30) { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
ul#minute li:nth-child(31) { -webkit-transform: rotate(186deg); -moz-transform: rotate(186deg); -o-transform: rotate(186deg); transform: rotate(186deg); }
ul#minute li:nth-child(32) { -webkit-transform: rotate(192deg); -moz-transform: rotate(192deg); -o-transform: rotate(192deg); transform: rotate(192deg); }
ul#minute li:nth-child(33) { -webkit-transform: rotate(198deg); -moz-transform: rotate(198deg); -o-transform: rotate(198deg); transform: rotate(198deg); }
ul#minute li:nth-child(34) { -webkit-transform: rotate(204deg); -moz-transform: rotate(204deg); -o-transform: rotate(204deg); transform: rotate(204deg); }
ul#minute li:nth-child(35) { -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); -o-transform: rotate(210deg); transform: rotate(210deg); }
ul#minute li:nth-child(36) { -webkit-transform: rotate(216deg); -moz-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); }
ul#minute li:nth-child(37) { -webkit-transform: rotate(222deg); -moz-transform: rotate(222deg); -o-transform: rotate(222deg); transform: rotate(222deg); }
ul#minute li:nth-child(38) { -webkit-transform: rotate(228deg); -moz-transform: rotate(228deg); -o-transform: rotate(228deg); transform: rotate(228deg); }
ul#minute li:nth-child(39) { -webkit-transform: rotate(234deg); -moz-transform: rotate(234deg); -o-transform: rotate(234deg); transform: rotate(234deg); }
ul#minute li:nth-child(40) { -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg); }
ul#minute li:nth-child(41) { -webkit-transform: rotate(246deg); -moz-transform: rotate(246deg); -o-transform: rotate(246deg); transform: rotate(246deg); }
ul#minute li:nth-child(42) { -webkit-transform: rotate(252deg); -moz-transform: rotate(252deg); -o-transform: rotate(252deg); transform: rotate(252deg); }
ul#minute li:nth-child(43) { -webkit-transform: rotate(258deg); -moz-transform: rotate(258deg); -o-transform: rotate(258deg); transform: rotate(258deg); }
ul#minute li:nth-child(44) { -webkit-transform: rotate(264deg); -moz-transform: rotate(264deg); -o-transform: rotate(264deg); transform: rotate(264deg); }
ul#minute li:nth-child(45) { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); }
ul#minute li:nth-child(46) { -webkit-transform: rotate(276deg); -moz-transform: rotate(276deg); -o-transform: rotate(276deg); transform: rotate(276deg); }
ul#minute li:nth-child(47) { -webkit-transform: rotate(282deg); -moz-transform: rotate(282deg); -o-transform: rotate(282deg); transform: rotate(282deg); }
ul#minute li:nth-child(48) { -webkit-transform: rotate(288deg); -moz-transform: rotate(288deg); -o-transform: rotate(288deg); transform: rotate(288deg); }
ul#minute li:nth-child(49) { -webkit-transform: rotate(294deg); -moz-transform: rotate(294deg); -o-transform: rotate(294deg); transform: rotate(294deg); }
ul#minute li:nth-child(50) { -webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg); }
ul#minute li:nth-child(51) { -webkit-transform: rotate(306deg); -moz-transform: rotate(306deg); -o-transform: rotate(306deg); transform: rotate(306deg); }
ul#minute li:nth-child(52) { -webkit-transform: rotate(312deg); -moz-transform: rotate(312deg); -o-transform: rotate(312deg); transform: rotate(312deg); }
ul#minute li:nth-child(53) { -webkit-transform: rotate(318deg); -moz-transform: rotate(318deg); -o-transform: rotate(318deg); transform: rotate(318deg); }
ul#minute li:nth-child(54) { -webkit-transform: rotate(324deg); -moz-transform: rotate(324deg); -o-transform: rotate(324deg); transform: rotate(324deg); }
ul#minute li:nth-child(55) { -webkit-transform: rotate(330deg); -moz-transform: rotate(330deg); -o-transform: rotate(330deg); transform: rotate(330deg); }
ul#minute li:nth-child(56) { -webkit-transform: rotate(336deg); -moz-transform: rotate(336deg); -o-transform: rotate(336deg); transform: rotate(336deg); }
ul#minute li:nth-child(57) { -webkit-transform: rotate(342deg); -moz-transform: rotate(342deg); -o-transform: rotate(342deg); transform: rotate(342deg); }
ul#minute li:nth-child(58) { -webkit-transform: rotate(348deg); -moz-transform: rotate(348deg); -o-transform: rotate(348deg); transform: rotate(348deg); }
ul#minute li:nth-child(59) { -webkit-transform: rotate(354deg); -moz-transform: rotate(354deg); -o-transform: rotate(354deg); transform: rotate(354deg); }
ul#minute li:nth-child(60) { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
/* HOUR ------------------------- */
ul#hour li { width: 12px; margin-left: -6px;
}
ul#hour li span{ height: 30px;
}
/* 360(deg) / 12(hour) - 30*1, 30*2, 30*3 ... */
ul#hour li:nth-child(1) { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
ul#hour li:nth-child(2) { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); }
ul#hour li:nth-child(3) { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
ul#hour li:nth-child(4) { -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); }
ul#hour li:nth-child(5) { -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); -o-transform: rotate(150deg); transform: rotate(150deg); }
ul#hour li:nth-child(6) { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
ul#hour li:nth-child(7) { -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); -o-transform: rotate(210deg); transform: rotate(210deg); }
ul#hour li:nth-child(8) { -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg); }
ul#hour li:nth-child(9) { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); }
ul#hour li:nth-child(10) { -webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg); }
ul#hour li:nth-child(11) { -webkit-transform: rotate(330deg); -moz-transform: rotate(330deg); -o-transform: rotate(330deg); transform: rotate(330deg); }
ul#hour li:nth-child(12) { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
/* SCORPION - HAND - SECOND
------------------------- */
#scorpion, #hand, #second { position: absolute; left: 50%; top: 0; height: 134px; -webkit-transform-origin: 50% 100%; -webkit-transform: rotate(0deg); -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-transform-origin: 50% 100%; -moz-transform: rotate(0deg); -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -o-transform-origin: 50% 100%; -o-transform: rotate(0deg); -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; transform-origin: 50% 100%; transform: rotate(0deg); animation-iteration-count: infinite; animation-timing-function: linear;
}
#scorpion span, #hand span, #second span{ display: block; width: 100%; text-indent: -9999px;
}
/* SCORPION
------------------------- */
#scorpion { z-index: 2; width: 12px; margin-left: -6px; -webkit-animation-duration: 43200s; -webkit-animation-name: scorpion; -moz-animation-duration: 43200s; -moz-animation-name: scorpion; -o-animation-duration: 43200s; -o-animation-name: scorpion; animation-duration: 43200s; animation-name: scorpion;
}
@-webkit-keyframes scorpion { 0% { -webkit-transform: rotate(30deg); } 100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes scorpion { 0% { -moz-transform: rotate(30deg); } 100% { -moz-transform: rotate(360deg); }
}
@-o-keyframes scorpion { 0% { -o-transform: rotate(30deg); } 100% { -o-transform: rotate(360deg); }
}
@keyframes scorpion { 0% { transform: rotate(30deg); } 100% { transform: rotate(360deg); }
}
#scorpion span{ height: 103px; margin-top: 60px; background:#333;
}
/* HAND
------------------------- */
#hand { z-index: 3; width: 12px; margin-left: -6px; -webkit-animation-duration: 3600s; -webkit-animation-name: hand; -moz-animation-duration: 3600s; -moz-animation-name: hand; -o-animation-duration: 3600s; -o-animation-name: hand; animation-duration: 3600s; animation-name: hand;
}
@-webkit-keyframes hand { 0% { -webkit-transform: rotate(48deg); } 100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes hand { 0% { -moz-transform: rotate(48deg); } 100% { -moz-transform: rotate(360deg); }
}
@-o-keyframes hand { 0% { -o-transform: rotate(48deg); } 100% { -o-transform: rotate(360deg); }
}
@keyframes hand { 0% { transform: rotate(48deg); } 100% { transform: rotate(360deg); }
}
#hand span{ height: 144px; margin-top: 23px; background:#333;
}
/* SECOND
------------------------- */
#second { z-index: 4; width: 4px; margin-left: -2px; -webkit-animation-duration: 60s; -webkit-animation-name: second; -moz-animation-duration: 60s; -moz-animation-name: second; -o-animation-duration: 60s; -o-animation-name: second; animation-duration: 60s; animation-name: second;
}
@-webkit-keyframes second { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes second { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); }
}
@-o-keyframes second { 0% { -o-transform: rotate(0deg); } 100% { -o-transform: rotate(360deg); }
}
@keyframes second { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}
#second span{ height: 118px; margin-top: 60px; background: #cd1d1d;
}
/* second start ball */
#second span::before{ content: ''; position: absolute; z-index: 4; left: 50%; top: 40px; margin-left: -10px; width: 20px; height: 20px; background: #cd1d1d; border-radius: 100%;
}
/* second center ball */
#second span::after{ content: ''; position: absolute; z-index: 4; left: 50%; top: 128px; margin-left: -6px; width: 12px; height: 12px; background: #cd1d1d; border-radius: 100%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="iClock"> <div id="scorpion"><span></span></div> <div id="hand"><span></span></div> <div id="second"><span></span></div> <ul id="hour"> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> <li><span>4</span></li> <li><span>5</span></li> <li><span>6</span></li> <li><span>7</span></li> <li><span>8</span></li> <li><span>9</span></li> <li><span>10</span></li> <li><span>11</span></li> <li><span>12</span></li> </ul> <ul id="minute"> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> <li><span>4</span></li> <li><span>5</span></li> <li><span>6</span></li> <li><span>7</span></li> <li><span>8</span></li> <li><span>9</span></li> <li><span>10</span></li> <li><span>11</span></li> <li><span>12</span></li> <li><span>13</span></li> <li><span>14</span></li> <li><span>15</span></li> <li><span>16</span></li> <li><span>17</span></li> <li><span>18</span></li> <li><span>19</span></li> <li><span>20</span></li> <li><span>21</span></li> <li><span>22</span></li> <li><span>23</span></li> <li><span>24</span></li> <li><span>25</span></li> <li><span>26</span></li> <li><span>27</span></li> <li><span>28</span></li> <li><span>29</span></li> <li><span>30</span></li> <li><span>31</span></li> <li><span>32</span></li> <li><span>33</span></li> <li><span>34</span></li> <li><span>35</span></li> <li><span>36</span></li> <li><span>37</span></li> <li><span>38</span></li> <li><span>39</span></li> <li><span>40</span></li> <li><span>41</span></li> <li><span>42</span></li> <li><span>43</span></li> <li><span>44</span></li> <li><span>45</span></li> <li><span>46</span></li> <li><span>47</span></li> <li><span>48</span></li> <li><span>49</span></li> <li><span>50</span></li> <li><span>51</span></li> <li><span>52</span></li> <li><span>53</span></li> <li><span>54</span></li> <li><span>55</span></li> <li><span>56</span></li> <li><span>57</span></li> <li><span>58</span></li> <li><span>59</span></li> <li><span>60</span></li> </ul>
</div>
</body>
</html>
Pure CSS3 iPad Clock - Script Codes CSS Codes
/* RESET
------------------------- */
* { margin: 0; padding: 0; }
li { list-style: none; }
body { background: #ddd; }
/* CLOCK BODY
------------------------- */
#iClock { position: relative; overflow: hidden; width: 268px; height: 268px; margin: 20px auto; background: #f8f8f8; border-radius: 268px; } /* center dot */ #iClock:after { content: ''; position: absolute; z-index: 12; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; width: 2px; height: 2px; border:1px solid #fff; background: #666; border-radius: 2px; } /* inset shadow */ #iClock:before { content: ''; position: absolute; z-index: 12; width: 100%; height: 100%; background: transparent; overflow: hidden; border-radius: 100%; -webkit-box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,.5); -moz-box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,.5); -o-box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,.5); box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,.5); }
/* MINUTE - HOUR
------------------------- */
ul#minute, ul#hour { position: absolute; z-index: 1; top: 8px; left: 8px; width: 252px; height: 252px;
}
ul#minute li, ul#hour li { position: absolute; left: 50%; top: 0; width: 2px; height: 126px; margin-left: -1px; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%;
}
ul#minute li span, ul#hour li span{ display: block; width: 100%; height: 13px; text-indent: -9999px; background:#333;
}
/* 360(deg) / 60(minute) - 6*1, 6*2, 6*3 ... */
ul#minute li:nth-child(1) { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); }
ul#minute li:nth-child(2) { -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); transform: rotate(12deg); }
ul#minute li:nth-child(3) { -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg); -o-transform: rotate(18deg); transform: rotate(18deg); }
ul#minute li:nth-child(4) { -webkit-transform: rotate(24deg); -moz-transform: rotate(24deg); -o-transform: rotate(24deg); transform: rotate(24deg); }
ul#minute li:nth-child(5) { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
ul#minute li:nth-child(6) { -webkit-transform: rotate(36deg); -moz-transform: rotate(36deg); -o-transform: rotate(36deg); transform: rotate(36deg); }
ul#minute li:nth-child(7) { -webkit-transform: rotate(42deg); -moz-transform: rotate(42deg); -o-transform: rotate(42deg); transform: rotate(42deg); }
ul#minute li:nth-child(8) { -webkit-transform: rotate(48deg); -moz-transform: rotate(48deg); -o-transform: rotate(48deg); transform: rotate(48deg); }
ul#minute li:nth-child(9) { -webkit-transform: rotate(54deg); -moz-transform: rotate(54deg); -o-transform: rotate(54deg); transform: rotate(54deg); }
ul#minute li:nth-child(10) { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); }
ul#minute li:nth-child(11) { -webkit-transform: rotate(66deg); -moz-transform: rotate(66deg); -o-transform: rotate(66deg); transform: rotate(66deg); }
ul#minute li:nth-child(12) { -webkit-transform: rotate(72deg); -moz-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); }
ul#minute li:nth-child(13) { -webkit-transform: rotate(78deg); -moz-transform: rotate(78deg); -o-transform: rotate(78deg); transform: rotate(78deg); }
ul#minute li:nth-child(14) { -webkit-transform: rotate(84deg); -moz-transform: rotate(84deg); -o-transform: rotate(84deg); transform: rotate(84deg); }
ul#minute li:nth-child(15) { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
ul#minute li:nth-child(16) { -webkit-transform: rotate(96deg); -moz-transform: rotate(96deg); -o-transform: rotate(96deg); transform: rotate(96deg); }
ul#minute li:nth-child(17) { -webkit-transform: rotate(102deg); -moz-transform: rotate(102deg); -o-transform: rotate(102deg); transform: rotate(102deg); }
ul#minute li:nth-child(18) { -webkit-transform: rotate(108deg); -moz-transform: rotate(108deg); -o-transform: rotate(108deg); transform: rotate(108deg); }
ul#minute li:nth-child(19) { -webkit-transform: rotate(114deg); -moz-transform: rotate(114deg); -o-transform: rotate(114deg); transform: rotate(114deg); }
ul#minute li:nth-child(20) { -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); }
ul#minute li:nth-child(21) { -webkit-transform: rotate(126deg); -moz-transform: rotate(126deg); -o-transform: rotate(126deg); transform: rotate(126deg); }
ul#minute li:nth-child(22) { -webkit-transform: rotate(132deg); -moz-transform: rotate(132deg); -o-transform: rotate(132deg); transform: rotate(132deg); }
ul#minute li:nth-child(23) { -webkit-transform: rotate(138deg); -moz-transform: rotate(138deg); -o-transform: rotate(138deg); transform: rotate(138deg); }
ul#minute li:nth-child(24) { -webkit-transform: rotate(144deg); -moz-transform: rotate(144deg); -o-transform: rotate(144deg); transform: rotate(144deg); }
ul#minute li:nth-child(25) { -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); -o-transform: rotate(150deg); transform: rotate(150deg); }
ul#minute li:nth-child(26) { -webkit-transform: rotate(156deg); -moz-transform: rotate(156deg); -o-transform: rotate(156deg); transform: rotate(156deg); }
ul#minute li:nth-child(27) { -webkit-transform: rotate(162deg); -moz-transform: rotate(162deg); -o-transform: rotate(162deg); transform: rotate(162deg); }
ul#minute li:nth-child(28) { -webkit-transform: rotate(168deg); -moz-transform: rotate(168deg); -o-transform: rotate(168deg); transform: rotate(168deg); }
ul#minute li:nth-child(29) { -webkit-transform: rotate(174deg); -moz-transform: rotate(174deg); -o-transform: rotate(174deg); transform: rotate(174deg); }
ul#minute li:nth-child(30) { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
ul#minute li:nth-child(31) { -webkit-transform: rotate(186deg); -moz-transform: rotate(186deg); -o-transform: rotate(186deg); transform: rotate(186deg); }
ul#minute li:nth-child(32) { -webkit-transform: rotate(192deg); -moz-transform: rotate(192deg); -o-transform: rotate(192deg); transform: rotate(192deg); }
ul#minute li:nth-child(33) { -webkit-transform: rotate(198deg); -moz-transform: rotate(198deg); -o-transform: rotate(198deg); transform: rotate(198deg); }
ul#minute li:nth-child(34) { -webkit-transform: rotate(204deg); -moz-transform: rotate(204deg); -o-transform: rotate(204deg); transform: rotate(204deg); }
ul#minute li:nth-child(35) { -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); -o-transform: rotate(210deg); transform: rotate(210deg); }
ul#minute li:nth-child(36) { -webkit-transform: rotate(216deg); -moz-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); }
ul#minute li:nth-child(37) { -webkit-transform: rotate(222deg); -moz-transform: rotate(222deg); -o-transform: rotate(222deg); transform: rotate(222deg); }
ul#minute li:nth-child(38) { -webkit-transform: rotate(228deg); -moz-transform: rotate(228deg); -o-transform: rotate(228deg); transform: rotate(228deg); }
ul#minute li:nth-child(39) { -webkit-transform: rotate(234deg); -moz-transform: rotate(234deg); -o-transform: rotate(234deg); transform: rotate(234deg); }
ul#minute li:nth-child(40) { -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg); }
ul#minute li:nth-child(41) { -webkit-transform: rotate(246deg); -moz-transform: rotate(246deg); -o-transform: rotate(246deg); transform: rotate(246deg); }
ul#minute li:nth-child(42) { -webkit-transform: rotate(252deg); -moz-transform: rotate(252deg); -o-transform: rotate(252deg); transform: rotate(252deg); }
ul#minute li:nth-child(43) { -webkit-transform: rotate(258deg); -moz-transform: rotate(258deg); -o-transform: rotate(258deg); transform: rotate(258deg); }
ul#minute li:nth-child(44) { -webkit-transform: rotate(264deg); -moz-transform: rotate(264deg); -o-transform: rotate(264deg); transform: rotate(264deg); }
ul#minute li:nth-child(45) { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); }
ul#minute li:nth-child(46) { -webkit-transform: rotate(276deg); -moz-transform: rotate(276deg); -o-transform: rotate(276deg); transform: rotate(276deg); }
ul#minute li:nth-child(47) { -webkit-transform: rotate(282deg); -moz-transform: rotate(282deg); -o-transform: rotate(282deg); transform: rotate(282deg); }
ul#minute li:nth-child(48) { -webkit-transform: rotate(288deg); -moz-transform: rotate(288deg); -o-transform: rotate(288deg); transform: rotate(288deg); }
ul#minute li:nth-child(49) { -webkit-transform: rotate(294deg); -moz-transform: rotate(294deg); -o-transform: rotate(294deg); transform: rotate(294deg); }
ul#minute li:nth-child(50) { -webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg); }
ul#minute li:nth-child(51) { -webkit-transform: rotate(306deg); -moz-transform: rotate(306deg); -o-transform: rotate(306deg); transform: rotate(306deg); }
ul#minute li:nth-child(52) { -webkit-transform: rotate(312deg); -moz-transform: rotate(312deg); -o-transform: rotate(312deg); transform: rotate(312deg); }
ul#minute li:nth-child(53) { -webkit-transform: rotate(318deg); -moz-transform: rotate(318deg); -o-transform: rotate(318deg); transform: rotate(318deg); }
ul#minute li:nth-child(54) { -webkit-transform: rotate(324deg); -moz-transform: rotate(324deg); -o-transform: rotate(324deg); transform: rotate(324deg); }
ul#minute li:nth-child(55) { -webkit-transform: rotate(330deg); -moz-transform: rotate(330deg); -o-transform: rotate(330deg); transform: rotate(330deg); }
ul#minute li:nth-child(56) { -webkit-transform: rotate(336deg); -moz-transform: rotate(336deg); -o-transform: rotate(336deg); transform: rotate(336deg); }
ul#minute li:nth-child(57) { -webkit-transform: rotate(342deg); -moz-transform: rotate(342deg); -o-transform: rotate(342deg); transform: rotate(342deg); }
ul#minute li:nth-child(58) { -webkit-transform: rotate(348deg); -moz-transform: rotate(348deg); -o-transform: rotate(348deg); transform: rotate(348deg); }
ul#minute li:nth-child(59) { -webkit-transform: rotate(354deg); -moz-transform: rotate(354deg); -o-transform: rotate(354deg); transform: rotate(354deg); }
ul#minute li:nth-child(60) { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
/* HOUR ------------------------- */
ul#hour li { width: 12px; margin-left: -6px;
}
ul#hour li span{ height: 30px;
}
/* 360(deg) / 12(hour) - 30*1, 30*2, 30*3 ... */
ul#hour li:nth-child(1) { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
ul#hour li:nth-child(2) { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); }
ul#hour li:nth-child(3) { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
ul#hour li:nth-child(4) { -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); }
ul#hour li:nth-child(5) { -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); -o-transform: rotate(150deg); transform: rotate(150deg); }
ul#hour li:nth-child(6) { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
ul#hour li:nth-child(7) { -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); -o-transform: rotate(210deg); transform: rotate(210deg); }
ul#hour li:nth-child(8) { -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg); }
ul#hour li:nth-child(9) { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); }
ul#hour li:nth-child(10) { -webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg); }
ul#hour li:nth-child(11) { -webkit-transform: rotate(330deg); -moz-transform: rotate(330deg); -o-transform: rotate(330deg); transform: rotate(330deg); }
ul#hour li:nth-child(12) { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
/* SCORPION - HAND - SECOND
------------------------- */
#scorpion, #hand, #second { position: absolute; left: 50%; top: 0; height: 134px; -webkit-transform-origin: 50% 100%; -webkit-transform: rotate(0deg); -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-transform-origin: 50% 100%; -moz-transform: rotate(0deg); -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -o-transform-origin: 50% 100%; -o-transform: rotate(0deg); -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; transform-origin: 50% 100%; transform: rotate(0deg); animation-iteration-count: infinite; animation-timing-function: linear;
}
#scorpion span, #hand span, #second span{ display: block; width: 100%; text-indent: -9999px;
}
/* SCORPION
------------------------- */
#scorpion { z-index: 2; width: 12px; margin-left: -6px; -webkit-animation-duration: 43200s; -webkit-animation-name: scorpion; -moz-animation-duration: 43200s; -moz-animation-name: scorpion; -o-animation-duration: 43200s; -o-animation-name: scorpion; animation-duration: 43200s; animation-name: scorpion;
}
@-webkit-keyframes scorpion { 0% { -webkit-transform: rotate(30deg); } 100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes scorpion { 0% { -moz-transform: rotate(30deg); } 100% { -moz-transform: rotate(360deg); }
}
@-o-keyframes scorpion { 0% { -o-transform: rotate(30deg); } 100% { -o-transform: rotate(360deg); }
}
@keyframes scorpion { 0% { transform: rotate(30deg); } 100% { transform: rotate(360deg); }
}
#scorpion span{ height: 103px; margin-top: 60px; background:#333;
}
/* HAND
------------------------- */
#hand { z-index: 3; width: 12px; margin-left: -6px; -webkit-animation-duration: 3600s; -webkit-animation-name: hand; -moz-animation-duration: 3600s; -moz-animation-name: hand; -o-animation-duration: 3600s; -o-animation-name: hand; animation-duration: 3600s; animation-name: hand;
}
@-webkit-keyframes hand { 0% { -webkit-transform: rotate(48deg); } 100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes hand { 0% { -moz-transform: rotate(48deg); } 100% { -moz-transform: rotate(360deg); }
}
@-o-keyframes hand { 0% { -o-transform: rotate(48deg); } 100% { -o-transform: rotate(360deg); }
}
@keyframes hand { 0% { transform: rotate(48deg); } 100% { transform: rotate(360deg); }
}
#hand span{ height: 144px; margin-top: 23px; background:#333;
}
/* SECOND
------------------------- */
#second { z-index: 4; width: 4px; margin-left: -2px; -webkit-animation-duration: 60s; -webkit-animation-name: second; -moz-animation-duration: 60s; -moz-animation-name: second; -o-animation-duration: 60s; -o-animation-name: second; animation-duration: 60s; animation-name: second;
}
@-webkit-keyframes second { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes second { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); }
}
@-o-keyframes second { 0% { -o-transform: rotate(0deg); } 100% { -o-transform: rotate(360deg); }
}
@keyframes second { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}
#second span{ height: 118px; margin-top: 60px; background: #cd1d1d;
}
/* second start ball */
#second span::before{ content: ''; position: absolute; z-index: 4; left: 50%; top: 40px; margin-left: -10px; width: 20px; height: 20px; background: #cd1d1d; border-radius: 100%;
}
/* second center ball */
#second span::after{ content: ''; position: absolute; z-index: 4; left: 50%; top: 128px; margin-left: -6px; width: 12px; height: 12px; background: #cd1d1d; border-radius: 100%;
}
| Developer | Adem Ilter |
| Username | ademilter |
| Uploaded | June 11, 2022 |
| Rating | 3.5 |
| Size | 6,546 Kb |
| Views | 167,992 |
Do you need developer help for Pure CSS3 iPad Clock?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Adem Ilter (ademilter) Script Codes
| Name | Size |
| Interacthings logo animation | 2,841 Kb |
| Product list | 3,211 Kb |
| Chrome logo effect | 1,965 Kb |
| Lunar eclipse | 2,056 Kb |
| Countdown Clock | 4,715 Kb |
| Timeline with css | 2,817 Kb |
| Border box arrow | 2,700 Kb |
| A Pen by Adem ilter | 3,546 Kb |
| CSShrome | 7,087 Kb |
| Loading svg | 2,319 Kb |
Create amazing sales emails with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Double box-shadow | Daubac402 | 1,436 Kb |
| Super Discount | Orrinward | 3,225 Kb |
| UI Challenge - Budget Selector | AgentRR007 | 3,547 Kb |
| Weather App | OmranAbazid | 2,596 Kb |
| CSS Donut Charts | Seanstopnik | 2,908 Kb |
| Progressively reveal dots on a Bezier curve | GreenSock | 2,489 Kb |
| Text Looping Transition | Agelber | 5,619 Kb |
| Google Fonts Sass Mixin | HugoGiraudel | 4,237 Kb |
| Hamburger Menu Animation | Salmanraza | 2,580 Kb |
| Font stack | Adrianjacob | 1,868 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!