开发工具: Codepen.io
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #000;
}
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 video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(20px);
}
section .box div span {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.1);
background: #ccc;
}
section .box div span video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(0px);
}
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);
}
section .box div span:nth-child(3) {
transform: rotatey(90deg) translate3d(0, 0, -200px);
}
section .box div span:nth-child(3) video {
transform: rotatey(-180deg);
}
<body>
<section>
<video src="https://cdn.weyoung.tech/%E8%A7%86%E9%A2%91/apple-bg.webm" autoplay="autoplay" loop="loop"></video>
<div class="box">
<div>
<span><video src="https://cdn.weyoung.tech/%E8%A7%86%E9%A2%91/apple-bg.webm" autoplay="autoplay" loop="loop"></video></span>
<span><video src="https://cdn.weyoung.tech/%E8%A7%86%E9%A2%91/apple-bg.webm" autoplay="autoplay" loop="loop"></video></span>
<span><video src="https://cdn.weyoung.tech/%E8%A7%86%E9%A2%91/apple-bg.webm" autoplay="autoplay" loop="loop"></video></span>
</div>
</div>
</section>
</body>