The CSS transform property lets you rotate, scale, skew, or translate a given element. This is achieved by modifying the coordinate space of the CSS visual formatting model.
Example:
Transforming a flat DVD cover
to 3D:
Demo:
See the Pen Rotating DVD cover using CSS Transforms by Sagar Shrestha (@webisora) on CodePen.
HTML:
<div class="container">
<div class="dvd-container">
<div class="dvd">
<div class="front"></div>
<div class="back"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
margin: 0 auto;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.dvd-container {
position: relative;
width: 243px;
height: 445px;
margin: 0 auto;
overflow: visible;
perspective: 900px;
perspective-origin: 50% 50%;
-webkit-filter: drop-shadow(10px 10px 7px rgba(0,0,0,.3));
filter: drop-shadow(10px 10px 7px rgba(0,0,0,.3));
}
.dvd-container .dvd {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: translateZ(-14px);
transition: all 1s ease-in-out;
transform: rotateY( 10deg ) rotateX( 0deg );
}
.dvd-container .dvd{
-webkit-animation: rotation-3d 8s infinite linear;
animation: rotation-3d 8s infinite linear;
}
@-webkit-keyframes rotation-3d {
from {
-webkit-transform: rotateY( 0deg ) rotateX( 0deg );
}
to {
-webkit-transform: rotateY( 360deg ) rotateX( 0deg );
}
}
@keyframes rotation-3d {
from {
transform: rotateY( 0deg ) rotateX( 0deg );
}
to {
transform: rotateY( 360deg ) rotateX( 0deg );
}
}
.dvd-container .dvd div {
position: absolute;
background-color: rgba(0,0,0,0.7);
background-size: 510px 345px;
backface-visibility: visible;
background-image: url('https://webisora.com/wp-content/uploads/2018/07/ubuntu.png');
}
.dvd-container .dvd div.front {
width: 243px;
height: 345px;
background-position: 243px 0px;
border-top: solid 5px #000;
border-right: solid 5px #000;
border-bottom: solid 5px #000;
z-index: 10;
transform: rotateY( 0deg ) translateZ( 14px );
}
.dvd-container .dvd div.back {
width: 243px;
height: 345px;
background-position: 0px 0px;
border-top: solid 5px #000;
border-left: solid 5px #000;
border-bottom: solid 5px #000;
transform: rotateY( 180deg ) translateZ( 14px );
}
.dvd-container .dvd div.left {
width: 28px;
height: 345px;
background-position: 268px 0px;
border-top: solid 5px #000;
border-bottom: solid 5px #000;
transform: rotateY( -90deg ) translateZ( 14px );
}
.dvd-container .dvd div.right {
width: 28px;
height: 345px;
transform: rotateY( 90deg ) translateZ( 230px );
background-image: none;
background-color: rgba(0,0,0,1);
}
.dvd-container .dvd div.top {
width: 243px;
height: 28px;
transform: rotateX( 90deg ) translateZ( 14px );
background-image: none;
background-color: rgba(0,0,0,0.7);
}
.dvd-container .dvd div.bottom {
width: 243px;
height: 28px;
transform: rotateX( -90deg ) translateZ( 331px );
background-image: none;
background-color: rgba(0,0,0,0.7);
}
[Note: Image of the DVD cover is taken from Speedbuntu]
0 Comments