Edit in JSFiddle

// To run the clock with current time
updateVisual();

function updateVisual() {
    var time = new Date();
    second = time.getSeconds();
    hour = time.getHours();
    minute = time.getMinutes();

    // Calculating the seconds,minutes and hours position value
    sec = second * 6;
    min = minute * 6;
    hrs = ((hour % 12) / 12) * 360 + 90 + minute / 12;

    $('#hour').css({
        "transform": "rotate(" + hrs + "deg)",
            "-webkit-transform": "rotate(" + hrs + "deg)"
    });
    $('#minute').css({
        "transform": "rotate(" + min + "deg)",
            "-webkit-transform": "rotate(" + min + "deg)"
    });
    $('#second').css({
        "transform": "rotate(" + sec + "deg)",
            "-webkit-transform": "rotate(" + sec + "deg)"
    });

}

setInterval(function () {
    updateVisual();
}, 1000);

<div class="circle ">
    <div class="face  ">
        <div id="hour" style="-webkit-transform: rotate(0deg)"></div>
        <div id="minute" style="-webkit-transform: rotate(360deg)"></div>
        <div id="second" style="-webkit-transform: rotate(270deg)"></div>
    </div>
</div>
<iframe id="iframe1" src="http://jqfaq.com/AdPage.html" style="width:100%; height:115px; border:none;"
/>

.face {
    width: 150px;
    height: 150px;
    border: 5px solid whitesmoke;
    border-radius: 50%;
    position: relative;
    background:url('http://download.jqueryui.com/themeroller/images/ui-bg_flat_100_555_40x100.png');
}
.face:before {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: whitesmoke;
    border-radius: 50%;
    content:"";
    display: block;
}
.class {
    width: 260px;
    height: 260px;
    left: 20px;
    top: 20px;
    position: absolute;
}
#hour {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -5px 0px -5px -25%;
    padding: 5px 0px 5px 25%;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    border-radius: 5px 0 0 5px;
    background-color:black;
}
#minute {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40% -5px 0;
    padding: 40% 5px 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    border-radius: 5px 5px 0 0;
    background-color:black;
}
#second {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40% -1px 0 0;
    padding: 40% 1px 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    background-color:black;
}