本文主要是介绍CSS视频播放3D立方体，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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>
这篇关于CSS视频播放3D立方体的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
