css3制作3d正方体相册

最新推荐文章于 2021-07-19 20:33:03 发布

Alice_yo

最新推荐文章于 2021-07-19 20:33:03 发布

阅读量1.2k

点赞数 3

文章标签： css3 html

本文链接：https://blog.csdn.net/Alice_yo/article/details/103847555

版权

写了一个3D旋转相册外面是一个正方体内部是一个小的正方体当然鼠标要移动到外面的大的正方体是看不见里面小的正方体的图片我用的是img引入的也可以换成背景图引入下面的代码其实还可以做一些简化并且也有其他的更好的方法哈哈哈不过自己本人太懒了就这个样子叭~

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>3D相册</title>
   <style>
       *{
           margin: 0;
           padding: 0;
       }
       .wrap{
           height: 200px;
           margin-top: 200px;
       }
       .cube{
           width: 200px;
           height: 200px;
           margin: 0 auto;
           position: relative;
           transform-style: preserve-3d;
           transform: rotateX(0deg) rotateY(0deg);
           animation: run 20s linear infinite;
       }
       /*big div*/
       .cube div{
           width: 100%;
           height: 100%;
           position: absolute;
           top: 0;
           left: 0;
           transition: transform  .2s ease-in;
       }
       .cube .front{
           transform: translateZ(100px);
       }
       .cube .back{
           transform:translateZ(-100px) rotateY(180deg) ;
       }
       .cube .left{
           transform: rotateY(-90deg) translateZ(100px);
       }
       .cube .right{
           transform: rotateY(90deg) translateZ(100px);
       }
       .cube .top{
           transform: rotateX(90deg) translateZ(100px);
       }
       .cube .bottom{
           transform: rotateX(-90deg) translateZ(100px);
       }
       .img1{
           width: 200px;
           height: 200px;
       }

       /*small div*/
       .cube i{
           width: 100px;
           height: 100px;
           position: absolute;
           top: 50%;
           left: 50%;
           margin-top: -50px;
           margin-left: -50px;
       }
       .cube .i-front{
           transform: translateZ(50px);
       }
       .cube .i-back{
           transform:translateZ(-50px) rotateY(180deg) ;
       }
       .cube .i-left{
           transform: rotateY(-90deg) translateZ(50px);
       }
       .cube .i-right{
           transform: rotateY(90deg) translateZ(50px);
       }
       .cube .i-top{
           transform: rotateX(90deg) translateZ(50px);
       }
       .cube .i-bottom{
           transform: rotateX(-90deg) translateZ(50px);
       }
       i>img{
           width: 100px;
           height: 100px;
       }
       /*hover div*/
       .cube:hover .front{
           transform: translateZ(200px);
       }
       .cube:hover .back{
           transform:translateZ(-200px) rotateY(180deg) ;
       }
       .cube:hover .left{
           transform: rotateY(-90deg) translateZ(200px);
       }
       .cube:hover .right{
           transform: rotateY(90deg) translateZ(200px);
       }
       .cube:hover .top{
           transform: rotateX(90deg) translateZ(200px);
       }
       .cube:hover .bottom{
           transform: rotateX(-90deg) translateZ(200px);
       }
       .img1:hover{
           width: 200px;
           height: 200px;
       }
       @keyframes run{
           0%{
               transform: rotateX(0deg)  rotateY(0deg);
           }
           100%{
               transform: rotateX(360deg) rotateY(360deg);
           }
       }
   </style>
</head>
<body>
   <div class="wrap">
       <div class="cube">
           <div class="front"><img src="imgs/1.jpg" class="img1"></div>
           <div class="back"><img src="imgs/2.jpg" class="img1"></div>
           <div class="left"><img src="imgs/3.jpeg" class="img1"></div>
           <div class="right"><img src="imgs/4.jpeg" class="img1"></div>
           <div class="top"><img src="imgs/5.jpg" class="img1"></div>
           <div class="bottom"><img src="imgs/6.jpeg" class="img1"></div>
           <i class="class i-front"><img src="imgs/7.jpeg"></i>
           <i class="class i-back"><img src="imgs/7.jpeg"></i>
           <i class="class i-left"><img src="imgs/7.jpeg"></i>
           <i class="class i-right"><img src="imgs/7.jpeg"></i>
           <i class="class i-top"><img src="imgs/7.jpeg"></i>
           <i class="class i-bottom"><img src="imgs/7.jpeg"></i>
       </div>
   </div>
</body>
</html>

由于运用的是自己的丑照所以就不放效果图啦有不对的欢迎提出来哟

Alice_yo

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3制作3d正方体相册

写了一个3D旋转相册外面是一个正方体内部是一个小的正方体当然鼠标不到外面的大的正方体是看不见里面小的正方体的图片我用的是img引入的也可以换成背景图引入下面的代码其实还可以做一些简化并且也有其他的更好的方法哈哈哈不过自己本人太懒了就这个样子叭~<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫