css3制作3d正方体相册

最新推荐文章于 2022-08-12 21:32:42 发布

Alice_yo

最新推荐文章于 2022-08-12 21:32:42 发布

阅读量1.2k

点赞数 3

文章标签： css3 html

本文链接：https://blog.youkuaiyun.com/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

最低0.47元/天解锁文章