html+css制作3D透明立体效果

最新推荐文章于 2023-04-03 10:17:21 发布

含若飞

最新推荐文章于 2023-04-03 10:17:21 发布

阅读量1.6k

点赞数 1

分类专栏： html+css

本文链接：https://blog.csdn.net/weixin_47684422/article/details/114942643

版权

html+css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天给大家分享一下如何制作3D透明立体

首先还是说一下原理；
在一个大盒子中包含六个小盒子，每个盒子中放置一张图片，通过我们使用rotate和translate属性，让每一张图片旋转一定的角度，从而使其拼接为一个立方体，最后再使用animation属性让其整体呈现规律性旋转就可以了。
最终效果如下：
在这里插入图片描述
话不多说，我们直接开始。

1. 添加六张图片

<div class="container">
     <div class="item front"><img src="http://picsum.photos/400/400?random=1" alt=""></div>
     <div class="item back"><img src="http://picsum.photos/400/400?random=2" alt=""></div>
     <div class="item left"><img src="http://picsum.photos/400/400?random=3" alt=""></div>
     <div class="item right"><img src="http://picsum.photos/400/400?random=4" alt=""></div>
     <div class="item top"><img src="http://picsum.photos/400/400?random=5" alt=""></div>
     <div class="item bottom"><img src="http://picsum.photos/400/400?random=6" alt=""></div>
  </div>

在这里给大家分享一个小网站，就是我在代码中使用的这个网站。这个网站非常方便，它会随机产生一张图片供我们去使用，而不用我们去下载。我们需要的图片尺寸、模糊度以及图片格式只需要我们备注好就可以了，我图中就直接使用的是400*400的图片，因为他是随机生成的，所以我们每刷新一次就会生成六个不同的图片，这个网站真的太好用了，所以强烈推荐给大家。

2.给大盒子添加相对定位

给大盒子添加相对定位主要是为了让六张图片重叠在一起，方便我们后面对其进行操作。

container{
width: 300px;
height: 300px;
position: relative;
transform-style: preserve-3d;
}

.container .item{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

3.对每一张图片进行位置调整

在我们上一步添加完定位之后，六张图片会重叠在一起。现在我们分别对六张图片进行操作。
正面的这张图片的朝向是正确的，所以只需要我们将它向z轴正方向平移即可；背面的图片朝向是反的，所以我们需要先让其沿着Y轴旋转180度，再让其向z轴正方形平移即可；左面的图片首先需要让其沿着Y轴旋转-90度，再让其向z轴正方向平移；右面的与左面的相反，顺时针旋转90度，再让其向z轴正方向平移；顶部的图片需要沿着x轴方向旋转90度，再向z轴方向平移；下面的图片与上面的相反，旋转-90度，再向z轴方向平移。
代码如下：

.container .front{
    transform: translateZ(150px);
}
.container .back{
    transform:rotateY(180deg) translateZ(150px);
}
.container .left{
    transform: rotateY(-90deg) translateZ(150px);
}
.container .right{
    transform: rotateY(90deg) translateZ(150px);
}
.container .top{
    transform: rotateX(90deg) translateZ(150px);
}
.container .bottom{
    transform: rotateX(-90deg) translateZ(150px);
}

在给每一个面做调整的时候有几点需要注意一下：
1.需要先对其进行旋转再平移。
2.经过旋转之后是我们正着面对这张图片，也就是我们观察者的视角也会进行旋转，所以是向z轴正方向进行平移。
3.对left，即左边的面进行旋转时是逆时针。因为y轴的正方向是向下的，所以我们需要站在y轴正方向去观察，所以它是逆时针的。
如果当我们不知道它需要顺时针还是逆时针旋转时只需要站在旋转那个轴的正方向去观察就可以。因为我们习惯中的笛卡尔坐标系中Y轴正方形是向上的，这个坐标系与我们使用的相反，所以我们才会对这里产生疑惑。

4.给container添加动画

最后这个立体效果就已经做好了，只需要我们使用animation去让它进行旋转呈现不同的面即可

@keyframes zhuan{
0%,5%{
transform: rotateY(90deg);
}
20%,25%{
transform: rotateY(180deg)
}
40%,45%{
transform: rotateY(270deg)
}
60%,65%{
transform: rotateX(90deg);
}
95%,100%{
transform: rotateX(-90deg);
}

在这里为了让每一个面都停留一些时间，所以在帧动画中给它添加了相同的样式。
到这里我们的3D相册就制作完成了，如果大家的编译器有自动保存的话那么大家会发现每更改一次我们的3D相册就会呈现不同的六个面。
最后我将整体代码分享给大家，如果有不足或者是不理解的地方希望大家及时提出：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D相册</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="item front"><img src="image/001.png" alt=""></div>
        <div class="item back"><img src="image/009.png" alt=""></div>
        <div class="item left"><img src="image/003.png" alt=""></div>
        <div class="item right"><img src="image/004.png" alt=""></div>
        <div class="item top"><img src="image/007.png" alt=""></div>
        <div class="item bottom"><img src="image/005.png" alt=""></div>
</body>

</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(http://picsum.photos/1920/950);

}
.container{
width: 300px;
height: 300px;
position: relative;
transform-style: preserve-3d;
animation:zhuan linear 8s alternate infinite;
transform: rotateX(-20deg) rotateY(-20deg);
}

.container .item{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}
.container img{
    width: 100%;
    height: 100%;
}
.container .front{
    transform: translateZ(150px);
}
.container .back{
    transform:rotateY(180deg) translateZ(150px);
}
.container .left{
    transform: rotateY(-90deg) translateZ(150px);
}
.container .right{
    transform: rotateY(90deg) translateZ(150px);
}
.container .top{
    transform: rotateX(90deg) translateZ(150px);
}
.container .bottom{
    transform: rotateX(-90deg) translateZ(150px);
}
@keyframes zhuan{
0%,5%{
transform: rotateY(90deg);
}
20%,25%{
transform: rotateY(180deg)
}
40%,45%{
transform: rotateY(270deg)
}
60%,65%{
transform: rotateX(90deg);
}
95%,100%{
transform: rotateX(-90deg);
}
}