video1.mp4
( Download )
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS 3D Video </title>
<link rel="stylesheet" type="text/css" href="aastyle.css">
</head>
<body>
<section>
<video src="video1.mp4" autoplay="" muted="" loop="" controls="" ></video>
<div class="box">
<div>
<span>
<video src="video1.mp4" autoplay="" muted="" loop=""></video>
</span>
<span>
<video src="video1.mp4" autoplay="" muted="" loop=""></video>
</span>
<span>
<video src="video1.mp4" autoplay="" muted="" loop=""></video>
</span>
</div>
</div>
</section>
</body>
</html>
CSS
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:#000;
}
section{
position:relative;
width: 100%;
height:100vh;
}
section .box{
position: absolute;
top: calc(50% - 200px);
left:calc(50% - 200px);
width:400px;
height: 400px;
transform-style: preserve-3d;
}
section .box div{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(25deg) translate3d(-75px,-50px,150px);
}
section .box div span{
position: absolute;
top: 0;
left: 0;
display:block;
width:100%;
height:100%;
border: 1px solid rgba(0,0,0,.1);
background:#ccc;
}
section .box div span:nth-child(1){
transform: rotateX(0deg) translate3d(0,0,200px);
}
section .box div span:nth-child(2){
transform: rotateX(90deg) translate3d(0,0,200px);
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:#000;
}
section{
position:relative;
width: 100%;
height:100vh;
}
section .box{
position: absolute;
top: calc(50% - 200px);
left:calc(50% - 200px);
width:400px;
height: 400px;
transform-style: preserve-3d;
}
section .box div{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(25deg) translate3d(-75px,-50px,150px);
}
section .box div span{
position: absolute;
top: 0;
left: 0;
display:block;
width:100%;
height:100%;
border: 1px solid rgba(0,0,0,.1);
background:#ccc;
}
section .box div span:nth-child(1){
transform: rotateX(0deg) translate3d(0,0,200px);
}
section .box div span:nth-child(2){
transform: rotateX(90deg) translate3d(0,0,200px);
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:#000;
}
section{
position:relative;
width: 100%;
height:100vh;
}
section .box{
position: absolute;
top: calc(50% - 200px);
left:calc(50% - 200px);
width:400px;
height: 400px;
transform-style: preserve-3d;
}
section .box div{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(25deg) translate3d(-75px,-50px,150px);
}
section .box div span{
position: absolute;
top: 0;
left: 0;
display:block;
width:100%;
height:100%;
border: 1px solid rgba(0,0,0,.1);
background:#ccc;
}
section .box div span video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
filter:blur(0px);
}
section video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
filter:blur(20px);
}
section .box div span:nth-child(1){
transform: rotateX(0deg) translate3d(0,0,200px);
}
section .box div span:nth-child(2){
transform: rotateY(90deg) translate3d(0,0,-200px);
}
section .box div span:nth-child(2) video{
transform: rotateY(180deg);
}
section .box div span:nth-child(3){
transform: rotateX(90deg) translate3d(0,0,200px);
}