96 lines
2.1 KiB
SCSS
96 lines
2.1 KiB
SCSS
.perspective-container {
|
|
margin-top: 5rem;
|
|
perspective: 1500px;
|
|
}
|
|
|
|
.laptop {
|
|
width: 80%;
|
|
margin-left: 0px;
|
|
transform: rotateX(6deg) rotateY(30deg) rotateZ(-6deg);
|
|
transform-style: preserve-3d;
|
|
transition-duration: 6s;
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
.laptop,
|
|
.laptop:hover {
|
|
transform: rotateX(6deg) rotateY(30deg) rotateZ(-6deg) scale3D(.4, .4, .4) translateX(-75%) !important;
|
|
margin-top: -60%;
|
|
margin-bottom: -80%;
|
|
}
|
|
span.laptop-shine {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.laptop:hover {
|
|
transform: rotateX(6deg) rotateY(25deg) rotateZ(-5deg) translateY(-5px) scale3D(1.03, 1.03, 1.03);
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.laptop-screen {
|
|
padding: 13px 10px 20px;
|
|
width: 100%;
|
|
border-radius: 15px;
|
|
background: white;
|
|
box-shadow: inset 0 4px 7px 1px #fff, inset 0 -5px 20px rgba(173, 186, 204, .25), 0 2px 6px rgba(0, 21, 64, .14), -16px 20px 40px 0px rgba(0, 0, 0, .15);
|
|
border-left: 2px solid #ddd;
|
|
}
|
|
|
|
.laptop-screen video {
|
|
width: 100%;
|
|
border-radius: 3px;
|
|
box-shadow: 0px 0px 4px 2px #eee;
|
|
}
|
|
|
|
span.laptop-shine {
|
|
display: none;
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 12px;
|
|
bottom: 200px;
|
|
right: 160px;
|
|
background: linear-gradient(to top right, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 250, .3) 77%, rgba(255, 255, 255, 0) 90%);
|
|
transition-duration: 6s;
|
|
}
|
|
|
|
.laptop:hover span.laptop-shine {
|
|
opacity: 0;
|
|
}
|
|
|
|
.laptop-keyboard {
|
|
border-left: 1px solid #ddd;
|
|
border-top: 2px solid #eee;
|
|
border-bottom: 12px solid #eee;
|
|
border-right: 21px solid white;
|
|
padding-left: 10px;
|
|
padding-top: 15px;
|
|
border-radius: 30px;
|
|
margin-top: -15px;
|
|
width: 100%;
|
|
height: 220px;
|
|
background: white;
|
|
transform: perspective(1500px) rotateX(70deg);
|
|
transform-origin: 50% 0;
|
|
box-shadow: -20px 30px 40px 0px rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
.laptop-keys {
|
|
background: linear-gradient(45deg, #cfd7e1, #dce3eb);
|
|
width: 92%;
|
|
height: 100px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.laptop-trackpad {
|
|
background: linear-gradient(45deg, #cfd7e1, #dce3eb);
|
|
width: 200px;
|
|
height: 70px;
|
|
margin-top: 10px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
opacity: 0.7;
|
|
}
|