aakritisbirthday.github.io/box.css at master · Devanshops/aakritisbirthday.github.io · GitHub

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
#container1 {
	height: 50vh;
	width: 50vw;
	left: 50%;
	min-height: 250px;
	min-width: 300px;
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	perspective: 800px;
}
#box * {
	width: 400px;
	height: 400px;
	backface-visibility: visible;
	position: absolute;
	margin: 0 auto;
}

#box {
	margin-top: 30%;
	transform-style: preserve-3d;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: skew 13s linear 0s infinite;
}
.face1 {
	transform: translateZ(-200px) translateX(300px) translateY(0px);
}
.face2 {
	transform: translateZ(200px) translateX(300px) translateY(0px);
}

.face3 {
	transform: rotateX(90deg) translateZ(200px) translateX(300px) translateY(0px);
}

.face4 {
	transform: rotateX(90deg) translateZ(-200px) translateX(300px) translateY(0px);
}

.face5 {
	transform: rotateY(90deg) translateZ(100px) translateX(0px) translateY(00px);
}

.face6 {
	transform: rotateY(90deg) translateZ(500px) translateX(0px) translateY(00px);
}
.color1 {
	background-image: url("1.jpg");
	width: 100vw;
}
.color2 {
	background: linear-gradient(#dbdbdb, #d2d2d2, #cecece);
}
.color3 {
	background: linear-gradient(#d0d0d0, #c7c7c7, #c2c2c2);
}
@keyframes skew {
	0% {
		transform: rotateY(0deg) rotateZ(0deg);
	}
	100% {
		transform: rotateY(360deg) rotateZ(360deg);
	}
}

@media only screen and (max-width: 481 px) {
}