"3D-Nested Squares"
Bootstrap 3.3.0 Snippet by Opeyemi15

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<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
29
30
31
32
33
34
35
36
37
/****My color sites: http://www.rapidtables.com/convert/color/rgb-to-hsl.htm; http://www.computerhope.com/htmcolor.htm;*** For Transform: http://css3.bradshawenterprises.com/transforms/***/
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: transparent;
}
div {
width: 40vmin;
height: 40vmin;
overflow: hidden;
}
div > div {
width: 100%;
border-radius:40%;
height: 100%;
animation: a 3s linear infinite;
background-color: hsla(180,100%,25%, 0.5);;/**Available on more colors: hsla(180,100%,50, 0.5);**/
}
@keyframes a {
0% { transform: scale(.5) rotateY(2deg); }
6.25% { transform: scale(.915) rotateY(5.625deg); }
12.5% { transform: scale(.85) rotateY(11.25deg); }
18.75% { transform: scale(.8) rotateY(16.875deg); }
25% { transform: scale(.765) rotateY(22.5deg); }
31.25% { transform: scale(.74) rotateY(28.125deg); }
37.5% { transform: scale(.72) rotateY(33.75deg); }
43.75% { transform: scale(.71) rotateY(39.375deg); }
50% { transform: scale(.708) rotateZ(45deg); }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Login and Register Modal
Collapsible nested comments

Questions / Comments: