Bootstrap Snippet clock wise 3D animation using HTML CSS

1
2
3
4
5
6
7
8
9
10
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="pin"></div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.pin {
    width:60px;
    height:2px;
    background:#000;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-1px;
    margin-left:-1px;
    opacity:0.5;
    z-index:-1;
            animation:watch-pin-move 22s 1s linear infinite;
    -webkit-animation:watch-pin-move 25s 1s linear infinite;
       -moz-animation:watch-pin-move 25s 1s linear infinite;
}
@keyframes watch-pin-move {
    0% { transform-origin:0% 0; transform:rotateZ(0deg); }
    100% { transform-origin:0% 0; transform:rotateZ(360deg); }
}
@-moz-keyframes watch-pin-move {
    0% { transform-origin:0% 0; transform:rotateZ(0deg); }
    100% { transform-origin:0% 0; transform:rotateZ(360deg); }
}
@-webkit-keyframes watch-pin-move {
    0% { transform-origin:0% 0; transform:rotateZ(0deg); }
    100% { transform-origin:0% 0; transform:rotateZ(360deg); }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"clock wise 3D animation"
Bootstrap 4.0.0 Snippet by naimansari

Related: See More

Questions / Comments:

"clock wise 3D animation" Bootstrap 4.0.0 Snippet by naimansari

Related: See More

Questions / Comments:

"clock wise 3D animation"
Bootstrap 4.0.0 Snippet by naimansari