Form by eslam-hany

1.form {
2  position: relative;
3  display: flex;
4  flex-direction: column;
5  gap: 10px;
6  padding: 50px 30px;
7  background: #0b2447;
8  border-radius: 10px;
9  overflow: hidden;
10  perspective: 1000px;
11  transform-style: preserve-3d;
12  transform: rotateX(-10deg);
13  transition: all 0.3s ease-in-out;
14  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
15  animation: form-animation 0.5s ease-in-out;
16}
17
18@keyframes form-animation {
19  from {
20    transform: rotateX(-30deg);
21    opacity: 0;
22  }
23
24  to {
25    transform: rotateX(0deg);
26    opacity: 1;
27  }
28}
29
30.input {
31  padding: 15px 10px;
32  border-radius: 5px;
33  margin-bottom: 10px;
34  background-color: transparent;
35  transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
36  transform-style: preserve-3d;
37  color: rgb(255, 255, 255);
38  border: 2px solid #3b8df2;
39  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
40}
41
42.input::placeholder {
43  color: #fff;
44}
45
46.input:hover,
47.input:focus {
48  border-color: #3b8df2;
49  background-color: transparent;
50  transform: scale(1.05) rotateY(20deg);
51  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
52  outline: none;
53}
54
55button {
56  padding: 10px 20px;
57  border: none;
58  border-radius: 5px;
59  background-color: transparent;
60  color: #fff;
61  font-size: 16px;
62  cursor: pointer;
63  transform-style: preserve-3d;
64  backface-visibility: hidden;
65  transform: rotateX(-10deg);
66  transition: all 0.3s ease-in-out;
67  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
68}
69
70button:hover {
71  background-color: #0077be;
72  font-size: 17px;
73  transform: scale(1.05) rotateY(20deg) rotateX(10deg);
74  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
75}
76