* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #2c2f36; 
    color: #f1f1f1; 
}

h1 {
    text-align: center;
    color: #4CAF50; 
}
p{
    font-size: large;
}
.rot3d, .trans3d, .scale3d, .pers3d {
    border: #444 2px solid;
    width: 300px;
    height: 100px;
    background-color: #333; 
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); 
}

.per {
    perspective: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;

}

.box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.rot3d:hover {
    transform: rotate3d(1, 1, 0, 45deg);
    transition: 1s;
    background-color: #4CAF50; 
}

.trans3d:hover {
    transform: translate3d(50px, 100px , 200px);
    transition: 1s;
    background-color: #2196F3; 
}

.scale3d:hover {
    transform: scale3d(0.8, 0.8, 0.8);
    transition: 1s;
    background-color: #673AB7; 
}

.pers3d:hover {
    transform: rotate3d(1, 1, 0, 10deg);
    transition: 1s;
    background-color: #9C27B0; 
}