Fancy Wrist Watch Using Css3 Transition and Transform Effect

css3transition

8 years ago

Wrist is a bi-weekly illustrative exercise to explore typography, colors, clock mechanics, and everything else that goes into watch design. Starting with one of my watches, I will be illustrating existing watches as well as exploring new watch designs. I sadly only own two watches, so I’ll quickly be moving to the latter.

This is the clock we’ll create using HTML, CSS and a little JavaScript. We’ll use CSS animations or transitions for any movement, and rely on JavaScript to set the initial time and adding basic CSS transforms.

My initial approach was to use three elements for each of the hands. I then went back and wrapped each in a container element. While the simpler HTML worked as far as the basic CSS animations, we’ll need containing elements when we want to position the hands and animate them also.

HTML:-

CSS:-

      body{ overflow: hidden; }


#watch {
  position: relative;
  margin: 50px;
}


.grip {
  position: absolute;
  border: 1px solid #777;
  width: 12px;
  height: 30px;
  background: #eee;
}


#tlg {
  top: -11px;
  left: 50px;
  border-radius: 8px 4px 0 0;
  border-left: none;
  box-shadow: inset 0 1px 0px #444444, inset 0 2px 0 white, inset 0 -6px 3px #444444;
}

/* line 25, ../sass/s.scss */
#trg {
  top: -11px;
  left: 150px;
  border-radius: 4px 8px 0 0;
  border-right: none;
  box-shadow: inset 0 1px 0 #444444, inset 0 2px 0 white, inset 0 -6px 3px #444444;
}

/* line 32, ../sass/s.scss */
#blg {
  top: 151px;
  left: 50px;
  border-radius: 0 0 4px 8px;
  border-left: none;
  box-shadow: inset 0 -1px 0px #444444, inset 0 -2px 0 white, inset 0 6px 3px #444444;
}

/* line 39, ../sass/s.scss */
#brg {
  top: 151px;
  left: 150px;
  border-radius: 0 0 8px 4px;
  border-left: none;
  box-shadow: inset 0 -1px 0px #444444, inset 0 -2px 0 white, inset 0 6px 3px #444444;
}

/* Material */
/* line 47, ../sass/s.scss */
.band {
  background: linear-gradient(27deg, #ae4601 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #ae4601 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #733206 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #733206 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #66381a 10px, transparent 10px),
linear-gradient(#66381a 25%, #301402 25%, #301402 50%, transparent 50%, transparent 75%, #3c1902 75%, #3c1902);
background-color: #512203;
background-size: 20px 20px;
  width: 87px;
  height: 600px;
  position: absolute;
}

/* line 54, ../sass/s.scss */
#topBand {
  top: -80px;
  left: 63px;
}

/* line 59, ../sass/s.scss */
#botBand {
  top: 140px;
  left: 63px;
}

/* Starting with the face of the watch */
/* line 65, ../sass/s.scss */
#face {
  background-color: #fefefe;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFEFEFE', endColorstr='#FFFFFFFF');
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(17%, #dbd9da), color-stop(50%, #0b0d0c), color-stop(51%, #0b0e0c), color-stop(59%, #b0b1b5), color-stop(71%, #aeadbd), color-stop(84%, #cfcfcd), color-stop(100%, #ffffff));
  background-image: -webkit-linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%);
  background-image: -moz-linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%);
  background-image: -o-linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%);
  background-image: linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%);
  margin: 20px;
  padding: 10px 0 0 10px;
  width: 160px;
  height: 160px;
  border: 1px solid #999;
  border-radius: 50%;
  box-shadow: inset 0 0 3px #000;
  position: relative;
}
/* line 78, ../sass/s.scss */
#face:after {
  content: " ";
  display: block;
  width: 14px;
  height: 22px;
  position: absolute;
  right: -15px;
  top: 74px;
  z-index: -9;
  border-radius: 10px;
  border: 1px solid #888;
  background-color: #aaa;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FF282828');
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(7%, #505050), color-stop(14%, #c5c7c6), color-stop(22%, #505050), color-stop(28%, #e6e4e7), color-stop(35%, #8d8c91), color-stop(42%, #e9e9e9), color-stop(49%, #8c8c8c), color-stop(57%, #e2e2e4), color-stop(65%, #c8c8c8), color-stop(72%, #808080), color-stop(76%, #b4b4b4), color-stop(85%, #fdfdfd), color-stop(92%, #b4b4b4), color-stop(100%, #282828));
  background-image: -webkit-linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%);
  background-image: -moz-linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%);
  background-image: -o-linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%);
  background-image: linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%);
}

/* line 94, ../sass/s.scss */
#glass {
  box-shadow: inset 0 0 6px #000;
  background: #a6a39e;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFC8C5C0', endColorstr='#FFADA8A2');
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c8c5c0), color-stop(100%, #ada8a2));
  background-image: -webkit-linear-gradient(top, #c8c5c0 0%, #ada8a2 100%);
  background-image: -moz-linear-gradient(top, #c8c5c0 0%, #ada8a2 100%);
  background-image: -o-linear-gradient(top, #c8c5c0 0%, #ada8a2 100%);
  background-image: linear-gradient(top, #c8c5c0 0%, #ada8a2 100%);
  width: 150px;
  height: 150px;
  border: 1px solid #999;
  border-radius: 80px;
  position: relative;
  /* Numbers */
}
/* line 107, ../sass/s.scss */
#glass div {
  position: absolute;
  font-size: 14px;
}
/* line 111, ../sass/s.scss */
#glass div:nth-child(2n) {
  transform: rotate(-90deg);
}
/* line 115, ../sass/s.scss */
#glass #twelve {
  top: 3px;
  left: 65px;
}
/* line 116, ../sass/s.scss */
#glass #three {
  top: 66px;
  left: 135px;
}
/* line 117, ../sass/s.scss */
#glass #six {
  top: 135px;
  left: 67px;
}
/* line 118, ../sass/s.scss */
#glass #nine {
  top: 66px;
  left: 5px;
}
/* line 121, ../sass/s.scss */
#glass #center {
  background: #e1ddd2;
  box-shadow: inset 0 1px 1px #777777, inset 0 -1px 1px #777777;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  top: 20px;
  left: 20px;
}
/* line 130, ../sass/s.scss */
#glass #center div {
  top: 55px;
  left: 55px;
}
/* line 134, ../sass/s.scss */
#glass #center #name, #glass #center #desc {
  top: 10px;
  left: 32px;
  font-variant: small-caps;
  font-size: 8px;
}
/* line 140, ../sass/s.scss */
#glass #center #desc {
  top: 70px;
  margin-left: 0px;
  transform: none;
}
/* line 146, ../sass/s.scss */
#glass #center #dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #444e5e;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF444E5E', endColorstr='#FF4F4E5E');
  left: 51px;
  top: 55px;
}
/* line 156, ../sass/s.scss */
#glass #center #smallHand, #glass #center #midHand, #glass #center #bigHand {
  background: #1c2252;
  width: 45px;
  height: 2px;
  border: 1px solid #4f4e5e;
  box-shadow: 0 0 1px #b5afaf;
  /* enables antialiasing */
  border-radius: 80%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transform-origin: 0% 50%;
  transform: rotate(-45deg);
  -webkit-animation: hours 43200s infinite linear;
  -moz-animation: hours 43200s infinite linear;
  -ms-animation: hours 43200s infinite linear;
  -o-animation: hours 43200s infinite linear;
  animation: hours 43200s infinite linear;
}
/* line 169, ../sass/s.scss */
#glass #center #bigHand {
  width: 65px;
  height: 0;
  border-bottom: none;
  -webkit-animation: seconds 60s infinite linear;
  -moz-animation: seconds 60s infinite linear;
  -ms-animation: seconds 60s infinite linear;
  -o-animation: seconds 60s infinite linear;
  animation: seconds 60s infinite linear;
}
/* line 175, ../sass/s.scss */
#glass #center #midHand {
  width: 65px;
  height: 1px;
  -webkit-animation: minutes 3600s infinite linear;
  -moz-animation:  minutes 3600s infinite linear;
  -ms-animation:  minutes 3600s infinite linear;
  -o-animation: minutes 3600s infinite linear;
  animation: minutes 3600s infinite linear;
}

/* keyframes added with JS so that watch starts at local time */
@-webkit-keyframes seconds {0%{-webkit-transform: rotate(120deg);}to{-webkit-transform: rotate(480deg);}}
@-webkit-keyframes minutes {0%{-webkit-transform: rotate(178deg);}to{-webkit-transform: rotate(538deg);}}
@-webkit-keyframes hours {0%{-webkit-transform: rotate(130deg);}to{-webkit-transform: rotate(490deg);}}

@-moz-keyframes seconds {0%{-moz-transform: rotate(120deg);}to{-moz-transform: rotate(480deg);}}
@-moz-keyframes minutes {0%{-moz-transform: rotate(178deg);}to{-moz-transform: rotate(538deg);}}
@-moz-keyframes hours {0%{-moz-transform: rotate(130deg);}to{-moz-transform: rotate(490deg);}}

@-o-keyframes seconds {0%{-o-transform: rotate(120deg);}to{-o-transform: rotate(480deg);}}
@-o-keyframes minutes {0%{-o-transform: rotate(178deg);}to{-o-transform: rotate(538deg);}}
@-o-keyframes hours {0%{-o-transform: rotate(130deg);}to{-o-transform: rotate(490deg);}}

@-ms-keyframes seconds {0%{-ms-transform: rotate(120deg);}to{-ms-transform: rotate(480deg);}}
@-ms-keyframes minutes {0%{-ms-transform: rotate(178deg);}to{-ms-transform: rotate(538deg);}}
@-ms-keyframes hours {0%{-ms-transform: rotate(130deg);}to{-ms-transform: rotate(490deg);}}

@keyframes seconds {0%{transform: rotate(120deg);}to{transform: rotate(480deg);}}
@keyframes minutes {0%{transform: rotate(178deg);}to{transform: rotate(538deg);}}
@keyframes hours {0%{transform: rotate(130deg);}to{transform: rotate(490deg);}}

    </style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

body{ overflow: hidden; }

#watch {

position: relative;

margin: 50px;

}

.grip {

position: absolute;

border: 1px solid #777;

width: 12px;

height: 30px;

background: #eee;

}

#tlg {

top: -11px;

left: 50px;

border-radius: 8px 4px 0 0;

border-left: none;

box-shadow: inset 0 1px 0px #444444, inset 0 2px 0 white, inset 0 -6px 3px #444444;

}

/* line 25, ../sass/s.scss */

#trg {

top: -11px;

left: 150px;

border-radius: 4px 8px 0 0;

border-right: none;

box-shadow: inset 0 1px 0 #444444, inset 0 2px 0 white, inset 0 -6px 3px #444444;

}

/* line 32, ../sass/s.scss */

#blg {

top: 151px;

left: 50px;

border-radius: 0 0 4px 8px;

border-left: none;

box-shadow: inset 0 -1px 0px #444444, inset 0 -2px 0 white, inset 0 6px 3px #444444;

}

/* line 39, ../sass/s.scss */

#brg {

top: 151px;

left: 150px;

border-radius: 0 0 8px 4px;

border-left: none;

box-shadow: inset 0 -1px 0px #444444, inset 0 -2px 0 white, inset 0 6px 3px #444444;

}

/* Material */

/* line 47, ../sass/s.scss */

.band {

background: linear-gradient(27deg, #ae4601 5px, transparent 5px) 0 5px,

linear-gradient(207deg, #ae4601 5px, transparent 5px) 10px 0px,

linear-gradient(27deg, #733206 5px, transparent 5px) 0px 10px,

linear-gradient(207deg, #733206 5px, transparent 5px) 10px 5px,

linear-gradient(90deg, #66381a 10px, transparent 10px),

linear-gradient(#66381a 25%, #301402 25%, #301402 50%, transparent 50%, transparent 75%, #3c1902 75%, #3c1902);

background-color: #512203;

background-size: 20px 20px;

width: 87px;

height: 600px;

position: absolute;

}

/* line 54, ../sass/s.scss */

#topBand {

top: -80px;

left: 63px;

}

/* line 59, ../sass/s.scss */

#botBand {

top: 140px;

left: 63px;

}

/* Starting with the face of the watch */

/* line 65, ../sass/s.scss */

#face {

background-color: #fefefe;

*zoom: 1;

filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFEFEFE', endColorstr='#FFFFFFFF');

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(17%, #dbd9da), color-stop(50%, #0b0d0c), color-stop(51%, #0b0e0c), color-stop(59%, #b0b1b5), color-stop(71%, #aeadbd), color-stop(84%, #cfcfcd), color-stop(100%, #ffffff));

background-image: -webkit-linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%);

background-image: -moz-linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%);

background-image: -o-linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%);

background-image: linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%);

margin: 20px;

padding: 10px 0 0 10px;

width: 160px;

height: 160px;

border: 1px solid #999;

border-radius: 50%;

box-shadow: inset 0 0 3px #000;

position: relative;

}

/* line 78, ../sass/s.scss */

#face:after {

content: " ";

display: block;

width: 14px;

height: 22px;

position: absolute;

right: -15px;

top: 74px;

z-index: -9;

border-radius: 10px;

border: 1px solid #888;

background-color: #aaa;

*zoom: 1;

filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FF282828');

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(7%, #505050), color-stop(14%, #c5c7c6), color-stop(22%, #505050), color-stop(28%, #e6e4e7), color-stop(35%, #8d8c91), color-stop(42%, #e9e9e9), color-stop(49%, #8c8c8c), color-stop(57%, #e2e2e4), color-stop(65%, #c8c8c8), color-stop(72%, #808080), color-stop(76%, #b4b4b4), color-stop(85%, #fdfdfd), color-stop(92%, #b4b4b4), color-stop(100%, #282828));

background-image: -webkit-linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%);

background-image: -moz-linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%);

background-image: -o-linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%);

background-image: linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%);

}

/* line 94, ../sass/s.scss */

#glass {

box-shadow: inset 0 0 6px #000;

background: #a6a39e;

*zoom: 1;

filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFC8C5C0', endColorstr='#FFADA8A2');

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c8c5c0), color-stop(100%, #ada8a2));

width: 150px;

height: 150px;

border: 1px solid #999;

border-radius: 80px;

position: relative;

/* Numbers */

}

/* line 107, ../sass/s.scss */

#glass div {

position: absolute;

font-size: 14px;

}

/* line 111, ../sass/s.scss */

#glass div:nth-child(2n) {

transform: rotate(-90deg);

}

/* line 115, ../sass/s.scss */

#glass #twelve {

top: 3px;

left: 65px;

}

/* line 116, ../sass/s.scss */

#glass #three {

top: 66px;

left: 135px;

}

/* line 117, ../sass/s.scss */

#glass #six {

top: 135px;

left: 67px;

}

/* line 118, ../sass/s.scss */

#glass #nine {

top: 66px;

left: 5px;

}

/* line 121, ../sass/s.scss */

#glass #center {

background: #e1ddd2;

box-shadow: inset 0 1px 1px #777777, inset 0 -1px 1px #777777;

width: 110px;

height: 110px;

border-radius: 50%;

top: 20px;

left: 20px;

}

/* line 130, ../sass/s.scss */

#glass #center div {

top: 55px;

left: 55px;

}

/* line 134, ../sass/s.scss */

#glass #center #name, #glass #center #desc {

top: 10px;

left: 32px;

font-variant: small-caps;

font-size: 8px;

}

/* line 140, ../sass/s.scss */

#glass #center #desc {

top: 70px;

margin-left: 0px;

transform: none;

}

/* line 146, ../sass/s.scss */

#glass #center #dot {

width: 8px;

height: 8px;

border-radius: 50%;

background: #444e5e;

*zoom: 1;

filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF444E5E', endColorstr='#FF4F4E5E');

left: 51px;

top: 55px;

}

/* line 156, ../sass/s.scss */

#glass #center #smallHand, #glass #center #midHand, #glass #center #bigHand {

background: #1c2252;

width: 45px;

height: 2px;

border: 1px solid #4f4e5e;

box-shadow: 0 0 1px #b5afaf;

/* enables antialiasing */

border-radius: 80%;

border-top-left-radius: 0;

border-bottom-left-radius: 0;

transform-origin: 0% 50%;

transform: rotate(-45deg);

-webkit-animation: hours 43200s infinite linear;

-moz-animation: hours 43200s infinite linear;

-ms-animation: hours 43200s infinite linear;

-o-animation: hours 43200s infinite linear;

animation: hours 43200s infinite linear;

}

/* line 169, ../sass/s.scss */

#glass #center #bigHand {

width: 65px;

height: 0;

border-bottom: none;

-webkit-animation: seconds 60s infinite linear;

-moz-animation: seconds 60s infinite linear;

-ms-animation: seconds 60s infinite linear;

-o-animation: seconds 60s infinite linear;

animation: seconds 60s infinite linear;

}

/* line 175, ../sass/s.scss */

#glass #center #midHand {

width: 65px;

height: 1px;

-webkit-animation: minutes 3600s infinite linear;

-moz-animation: minutes 3600s infinite linear;

-ms-animation: minutes 3600s infinite linear;

-o-animation: minutes 3600s infinite linear;

animation: minutes 3600s infinite linear;

}

/* keyframes added with JS so that watch starts at local time */

@-webkit-keyframes seconds {0%{-webkit-transform: rotate(120deg);}to{-webkit-transform: rotate(480deg);}}

@-webkit-keyframes minutes {0%{-webkit-transform: rotate(178deg);}to{-webkit-transform: rotate(538deg);}}

@-webkit-keyframes hours {0%{-webkit-transform: rotate(130deg);}to{-webkit-transform: rotate(490deg);}}

@-moz-keyframes seconds {0%{-moz-transform: rotate(120deg);}to{-moz-transform: rotate(480deg);}}

@-moz-keyframes minutes {0%{-moz-transform: rotate(178deg);}to{-moz-transform: rotate(538deg);}}

@-moz-keyframes hours {0%{-moz-transform: rotate(130deg);}to{-moz-transform: rotate(490deg);}}

@-o-keyframes seconds {0%{-o-transform: rotate(120deg);}to{-o-transform: rotate(480deg);}}

@-o-keyframes minutes {0%{-o-transform: rotate(178deg);}to{-o-transform: rotate(538deg);}}

@-o-keyframes hours {0%{-o-transform: rotate(130deg);}to{-o-transform: rotate(490deg);}}

@-ms-keyframes seconds {0%{-ms-transform: rotate(120deg);}to{-ms-transform: rotate(480deg);}}

@-ms-keyframes minutes {0%{-ms-transform: rotate(178deg);}to{-ms-transform: rotate(538deg);}}

@-ms-keyframes hours {0%{-ms-transform: rotate(130deg);}to{-ms-transform: rotate(490deg);}}

@keyframes seconds {0%{transform: rotate(120deg);}to{transform: rotate(480deg);}}

@keyframes minutes {0%{transform: rotate(178deg);}to{transform: rotate(538deg);}}

@keyframes hours {0%{transform: rotate(130deg);}to{transform: rotate(490deg);}}

</style>

JavaScript to set the initial time and adding basic CSS transforms

Demo

Download