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]