HTML + CSS 实现炫彩 3d 盒子

最新推荐文章于 2022-10-15 16:39:31 发布

淘淘是只狗

最新推荐文章于 2022-10-15 16:39:31 发布

阅读量1.2k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_43477721/article/details/105715490

版权

CSS 专栏收录该内容

26 篇文章 6 订阅

订阅专栏

视频来源👉👉👉： B站地址

看完之后，总有一种自己 CSS 白学的感觉，太卑微了，向大佬低头

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML、CSS打造酷炫3D视频</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <video src="scene.mp4" autoplay="" muted="" loop=""></video>
    <div class="box">
      <div>
        <span><video src="scene.mp4" autoplay="" muted="" loop=""></video></span>
        <span><video src="scene.mp4" autoplay="" muted="" loop=""></video></span>
        <span><video src="scene.mp4" autoplay="" muted="" loop=""></video></span>
      </div>
    </div>
  </div>
</body>
</html>

* {
  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; /* 表示所有子元素在3D空间呈现 */
  transform: rotateX(-18deg) rotateY(17deg) translate3d(12px, -34px, -86px); /* 旋转正方体在空间中的位置及投影，前两个参数控制投影，第三个参数控制空间位置 */
}
.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: rotateX(180deg);
}
.container .box > div span:nth-child(3) {
  transform: rotateY(-90deg) translate3d(0, 0, 200px);
}

vh 相对于视口的高度。视口被均分为100单位的vh
calc 能实现自适应的布局这篇文章我觉得写得很好，通俗易懂
transform-style: preserve-3d 表示所有子元素在3D空间呈现
object-fit，用来指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框 MDN地址

关注公众号：大明贵妇，无套路获取前端学习资料，期待各位客官来临
在这里插入图片描述

淘淘是只狗

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML + CSS 实现炫彩 3d 盒子

B站地址https://www.bilibili.com/video/BV1jC4y14739?from=search&seid=14906173926344311066看完之后，总有一种自己 CSS 白学的感觉，太卑微了，向大佬低头????????????????????????????????下面的评论有链接，里面有素材，（真是太贴心了）<!DOCTYPE html><html lang="en">...
复制链接

扫一扫