CSS视频播放3D立方体
程序员文章站
2023-12-25 18:31:15
...
CSS视频播放3D立方体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #000;
}
.container{
position: relative;
width: 100%;
height: 100vh;
}
.container .box{
position: absolute;
top: calc(50% - 200px );
left: calc(50% - 200px );
width: 400px;
height: 400px;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(23deg) translate3d(0,0,-12px);
}
.container .box > div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.container .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;
}
.container .box > div span video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(0);
}
.container video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(20px);
}
.container .box > div span:nth-child(1){
transform: rotateX(0deg) translate3d(0,0,200px);
}
.container .box > div span:nth-child(2){
transform: rotateX(-90deg) translate3d(0,0,-200px);
}
.container .box > div span:nth-child(2) video{
transform: rotateY(180deg);
}
.container .box > div span:nth-child(3){
transform: rotateY(-90deg) translate3d(0,0,200px);
}
</style>
</head>
<body>
<div class="container">
<span><video src="./video.mp4" autoplay="" muted="" loop=""></video></span>
<div class="box">
<div>
<span><video src="./video.mp4" autoplay="" muted="" loop=""></video></span>
<span><video src="./video.mp4" autoplay="" muted="" loop=""></video></span>
<span><video src="./video.mp4" autoplay="" muted="" loop=""></video></span>
</div>
</div>
</div>
</body>
</html>