H5 3d立体相册 CSS3特性

最新推荐文章于 2021-06-19 00:25:29 发布

foncen

最新推荐文章于 2021-06-19 00:25:29 发布

阅读量788

点赞数 1

分类专栏： h5 文章标签： css html css3 3d

本文链接：https://blog.csdn.net/weixin_43847839/article/details/108437016

版权

                    
CSS3 变形特性,立方相册,3d旋转 
 
 之前看见过3d效果的立体相册,挺羡慕的,现在自己也有机会实现属于自己的3d立体相册了~~~话不多说,开搞… 
  
 一, 准备材料 
  
  六张自己喜欢的图片,六个面,怎么简单方便怎么来,名字直接取123456,后缀.jpg,放到img文件夹下
一张小图片,大点也不要紧,为了浏览器标题图标好看点,弄个小标题图片,命名favicon.jpg
 
 二,开始 
  
  1,创建cube.html文件,路径与存放img图片的文件夹同级 
   
  2,先把小标题处理好 
  <head>
    <meta charset="UTF-8">
    <title>相册盒子</title>
    <link rel="icon" href="img/favicon.jpg">  <!--自定义标题图标-->
</head>
 
  3,把主体内容写好,一个外层盒子,6个div搞定 
  <body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="forward"></div>
        <div class="after"></div>
    </div>
</body>
 
  4,主体完成,开始调整样式 
  html

最低0.47元/天解锁文章

foncen

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
H5 3d立体相册 CSS3特性

CSS3 变形特性,立方相册,3d旋转之前看见过3d效果的立体相册,挺羡慕的,现在自己也有机会实现属于自己的3d立体相册了~~~话不多说,开搞…一, 准备材料六张自己喜欢的图片,六个面,怎么简单方便怎么来,名字直接取123456,后缀.jpg,放到img文件夹下一张小图片,大点也不要紧,为了浏览器标题图标好看点,弄个小标题图片,命名favicon.jpg二,开始1,创建cube.html文件,路径与存放img图片的文件夹同级2,先把小标题处理好<head>..
复制链接

扫一扫