3d立体相册的实现（附源码）

时间：2023-07-01 10:45:14浏览次数：42

标签：cube 相册 translateZ 90deg transform rotateY 源码 200px 3d

效果图（这里没办法显示动态，具体动态自己复制代码去网页看）：

CSS部分：

html{
    background: #000;
    height: 100%;    
}
/*最外层容器样式*/
.wrap{
    position: relative;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 200px;
    height: 200px;
    margin: auto;
    /*改变左右上下,图片方块移动*/
    
}
/*包裹所有容器样式*/
.cube{
    width: 200px;
    height: 200px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-80deg);
    -webkit-animation: rotate 20s infinite;
    /*匀速*/
    animation-timing-function: linear;
}
@-webkit-keyframes rotate{
    from{transform: rotateX(0deg) rotateY(0deg);}
    to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    transition: all .4s;
}
/*定义所有图片样式*/
.pic{
    width: 200px;
    height: 200px;
}
.cube .out_front{
    transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{
    transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left{
    transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right{
    transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top{
    transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{
    transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式*/
.cube span{
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
}
.cube .in_pic{
    width: 100px;
    height: 100px;
}
.cube .in_front{
    transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{
    transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{
    transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{
    transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{
    transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{
    transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front{
    transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{
    transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{
    transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{
    transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{
    transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{
    transform: rotateX(-90deg) translateZ(200px);
}

HTML部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>css-3d旋转</title>
        <link rel="stylesheet" href="css/index.css" />
    </head>
    <body>
        <!--/*外层最大容器*/-->
        <div class="wrap">
    <!--    /*包裹所有元素的容器*/-->
        <div class="cube">
            <!--前面图片 -->
            <div class="out_front">
                <img src="img/1.jpg"  class="pic"/>
            </div>
            <!--后面图片 -->
            <div class="out_back">
                <img src="img/2.jpg"  class="pic"/>
            </div>
            <!--左图片 -->
            <div class="out_left">
                <img src="img/3.jpg"  class="pic"/>
            </div>
            <div class="out_right">
                <img src="img/4.jpg"  class="pic"/>
            </div>
            <div class="out_top">
                <img src="img/5.jpg"  class="pic"/>
            </div>
            <div class="out_bottom">
                <img src="img/6.jpg"  class="pic"/>
            </div>
            <!--小正方体 --> 
            <span class="in_front">
                <img src="img/7.jpg" class="in_pic" />
            </span>
            <span class="in_back">
                 <img src="img/8.jpg" class="in_pic" />
            </span>
            <span class="in_left">
                <img src="img/9.jpg" class="in_pic" />
            </span>
            <span class="in_right">
                <img src="img/10.jpg" class="in_pic" />
            </span>
            <span class="in_top">
                <img src="img/11.jpg" class="in_pic" />
            </span>
            <span class="in_bottom">
                <img src="img/12.jpg" class="in_pic" />
            </span>
        </div>
        </div>
    </body>
</html>

img：

010203040506070809101112

注意：将图片复制到编辑器中，要改好图片的地址

标签：cube,相册,translateZ,90deg,transform,rotateY,源码,200px,3d
From： https://www.cnblogs.com/xm11667799/p/17518934.html

深度理解Iterator底层源码
publicabstractclassAbstractList<E>extendsAbstractCollection<E>implementsList<E>{//外部操作数：记录添加数据、删除数据的次数（记录元素个数变化的次数） protectedtransientintmodCount=0;//4}这段代码是一个抽象类AbstractList，实现了List接口。下面是对代码......
离线安装ffmpeg源码包【详细教程】
今天分享一下ffmpeg源码包的安装过程，针对在没有网络环境下，且不能直接使用yum如何成功安装ffmpeg源码包。博主本人通过正式服务器测试，记录整个安装过程。值得大家收藏同时，我会分享一下如何使用ffmpeg对H.264格式视频（MP4）进行m3u8+ts切片的转换，并生成m3u8+ts格式文件ffmpeg所需要环......
Debug Golang源码中的单元测试
goland配置如上，既可以debuggolang源码中的单元测试。......
【源码分析】Mybatis 的配置解析过程
博主介绍：✌博主从事应用安全和大数据领域，有8年研发经验，5年面试官经验，Java技术专家✌Java知识图谱点击链接：体系化学习Java（Java面试专题）......
深入学习 Mybatis 的四大组件源码
博主介绍：✌博主从事应用安全和大数据领域，有8年研发经验，5年面试官经验，Java技术专家✌Java知识图谱点击链接：体系化学习Java（Java面试专题）......
UE5 源码下载编译过程记录
前言没有科学上网，就不要折腾了1注册Epic2注册github3关联账号在UE官网登入账号并且关联github账号4下载源码5执行Setup.bat5.1执行出错提示FailedtodownloadFailedtodownload'http://cdn.unrealengine.com/dependencies/UnrealEngine-24819931/19acf26186763763ae43ec3e4bd1......
贪吃蛇游戏制作（附源码）
CSS：部分*{margin:0;padding:0;}.wrap{width:600px;margin:0auto;position:relative;}p{position:absolute;left:73%;top:10%;}h1{text-align:center;margin-bottom:20px;}#score{text-a......
SQLite4Unity3d unity游戏数据库
SQLite4Unity3d是一种基于sqlite-net进行封装的unity包，适用在iOS，Mac，Android和Windows项目中工作，适用于中大型游戏项目架构传统unity序列化数据共有几种方案，包括使用本地持久化类PlayerPrefs，使用Json方法、使用XMl方法，但以上几种方案有使用上限制，修改自由化，规模化使用......
直播网站源码，背景色渐变
直播网站源码，背景色渐变实现页面从白色背景过度到蓝色 vart=d3.transition() .duration(2000);d3.select("body").transition(t).style("background-color","lightblue");constcolors=['red','yellow','blue']letj=0fu......
校园APP小程序H5，免费源码，允许二开。
点击查看免费完整源码，允许二开50% { transform: scale(0.3); -webkit-transform: scale(0.3); opacity: 0.3; } 75% { transform: scale(0.5); -webkit-transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(0.8); -webkit-transform: scale(0.8); ......

3d立体相册的实现（附源码）

相关文章

赞助商

阅读排行