html
html
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
<!-- code hint from online
tutorial youtube channel -->
<!DOCTYPE html>
<html>
<head>
<title>Divya Mohan</title>
</head>
<body>
<div id="wrap">
<div id="cube">
<img id="a" src="https://images.pexels.com/photos/2859016/pexels-photo-2859016.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500">
<img id="b" src="https://images.pexels.com/photos/1659438/pexels-photo-1659438.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500">
<img id="c" src="https://images.pexels.com/photos/1852482/pexels-photo-1852482.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500">
<img id="d" src="https://images.pexels.com/photos/1530423/pexels-photo-1530423.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500">
<img id="e" src="https://images.pexels.com/photos/838696/pexels-photo-838696.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500">
<img id="f" src="https://images.pexels.com/photos/1576937/pexels-photo-1576937.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500">
</div>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
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
body {
margin:0;
padding:20px;
height:100vh;
width:100vw; background:url("https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500");
background-repeat:no-repeat ;
background-size:cover;
background-attachment:fixed ;
}
#wrap{
margin-top:200px;
perspective:1000px;
perspective-origin:50%;
}
img{
height:200px;
width:200px;
position:absolute;
opacity:.9;
}
#cube{
height:200px;
width:200px;
margin:auto;
position:relative;
transition:all 10s;
transform-style:preserve-3d;
animation:loop 20s alternate infinite;
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run