使用css3制作照片墙

最新推荐文章于 2023-09-11 16:41:04 发布
最新推荐文章于 2023-09-11 16:41:04 发布
阅读量649 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41839784/article/details/89852674
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        //给每一张图片的父级盒子定位
        .son{
            position:absolute;

        }
        //给图片设置宽高，并设置过渡效果
        .son img{
            width: 230px;
            height: 230px;
            transition:all .25s ;
        }
        //使子级元素保持3d效果，并且保持3d元素的透明效果
        .father{
            width:400px;
            height: 400px; 
            margin-top: 200px;
            margin-left: 400px;
            perspective:3000px;
            -webkit-transform: rotateX(-30deg);
               -moz-transform: rotateX(-30deg);
                -ms-transform: rotateX(-30deg);
                 -o-transform: rotateX(-30deg);
                    transform: rotateX(-30deg);
            transform-style: preserve-3d;
        }
        //给每一个图片设置旋转角度，并且调整位置达到六边体的效果
        .son:first-of-type{
            -webkit-transform: rotateY(0deg) translateZ(200px);
               -moz-transform: rotateY(0deg) translateZ(200px);
                -ms-transform: rotateY(0deg) translateZ(200px);
                 -o-transform: rotateY(0deg) translateZ(200px);
                    transform: rotateY(0deg) translateZ(200px);
        }
         .son:nth-of-type(2){
            -webkit-transform: rotateY(60deg) translateZ(200px);
               -moz-transform: rotateY(60deg) translateZ(200px);
                -ms-transform: rotateY(60deg) translateZ(200px);
                 -o-transform: rotateY(60deg) translateZ(200px);
                    transform: rotateY(60deg) translateZ(200px);
        }
         .son:nth-of-type(3){
            -webkit-transform: rotateY(120deg) translateZ(200px);
               -moz-transform: rotateY(120deg) translateZ(200px);
                -ms-transform: rotateY(120deg) translateZ(200px);
                 -o-transform: rotateY(120deg) translateZ(200px);
                    transform: rotateY(120deg) translateZ(200px);
        }
         .son:nth-of-type(4){
            -webkit-transform: rotateY(180deg) translateZ(200px);
               -moz-transform: rotateY(180deg) translateZ(200px);
                -ms-transform: rotateY(180deg) translateZ(200px);
                 -o-transform: rotateY(180deg) translateZ(200px);
                    transform: rotateY(180deg) translateZ(200px);
        }
         .son:nth-of-type(5){
            -webkit-transform: rotateY(240deg) translateZ(200px);
               -moz-transform: rotateY(240deg) translateZ(200px);
                -ms-transform: rotateY(240deg) translateZ(200px);
                 -o-transform: rotateY(240deg) translateZ(200px);
                    transform: rotateY(240deg) translateZ(200px);
        }
         .son:nth-of-type(6){
            -webkit-transform: rotateY(300deg) translateZ(200px);
               -moz-transform: rotateY(300deg) translateZ(200px);
                -ms-transform: rotateY(300deg) translateZ(200px);
                 -o-transform: rotateY(300deg) translateZ(200px);
                    transform: rotateY(300deg) translateZ(200px);
        }
       img:hover{
            transform: scale(1.2);
       }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"><img src="img/1.jpg" alt="" class="sss" /></div>
        <div class="son"><img src="img/2.jpg" alt="" class="sss" /></div>
        <div class="son"><img src="img/3.jpg" alt="" class="sss" /></div>
        <div class="son"><img src="img/4.jpg" alt="" class="sss" /></div>
        <div class="son"><img src="img/5.jpg" alt="" class="sss" /></div>
        <div class="son"><img src="img/6.jpg" alt="" class="sss" /></div>
    </div>
</body>
</html>

 

qq_41839784
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3制作精致的照片墙特效
09-27
主要为大家详细介绍了CSS3制作漂亮的照片墙的具体步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
16个实用的CSS样式之3D照片墙
Web_boom的博客
09-23 1519
到此为止一个简单的3D照片墙就做好啦，当然在常见的网站中不会这样去配色哈，还是要简约大气为主。但是学习阶段好看就完事了。如果觉得不错的话记得哈。整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取。
CSS实操三，运用浮动和定位实现照片墙效果
qq_55006020的博客
06-28 850
7，不同的小姐姐图片角度不同，所以我们需要transform：rotate（角度deg）去调整。1，不同的美女图片堆叠的顺序不同，所以需要用定位里面的z-index。3，每个美女的图片摆放的位置不同，需要用到定位 然后摆放他们位置。4，图片的位置不同，也运用一下浮动和清楚浮动，以免影响后续内容。2，超出容器的部分隐藏了，所以需要格外给容器设置一下。6，图片整体大小做了优化。5，图片边框做了优化。
【源码+文档】基于HTML+CSS实现可交互照片墙
最新发布
yuxibdd的博客
09-11 1164
根据需求，设计界面原型。
CSS--实现照片墙
qq_53441451的博客
12-21 3543
<h1>CSS 照片墙</h1> <div class="box"> <img src="1.jpg" alt="" class="img1"> <img src="2.jpg" alt="" class="img2"> <img src="3.jpg" alt="" class="img3"> <img src="4.jpg" alt="" class="img4"> <img
利用CSS3动画效果制作照片墙
muyuxifeng的博客
03-27 1037
HTML页面中写一个盒子，盒子里面放10张图片。让这10张图片，随意摆放(给图片设置旋转角度和在盒子中的所处位置)，再利用CSS3动画的技术，对这10张图片，设置鼠标悬停在某一张图片上时，该图片会放大、会由原来的角度旋转到正常的角度，同时这张被鼠标选中的图片会自动浮于所有图片的上方，以便图片能够被完全展示出来，为了增加图片的立体感 给被选中的图片设置了阴影效果。纯CSS3制作动态照片墙。
CSS3制作漂亮的照片墙的实现代码
09-24
下面小编就为大家带来一篇CSS3制作漂亮的照片墙的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3 transform制作漂亮的照片墙特效
12-13
总结起来，"CSS3 transform制作漂亮的照片墙特效"是一个运用了CSS3的`transform`属性来创建动态照片展示的项目，结合了旋转、缩放和平移等多种变换，通过CSS3的其他特性如`transition`增加交互性，为用户提供一个...
html+CSS制作照片墙
04-19
标题中的“html+CSS制作照片墙”指的是使用HTML（超文本标记语言）和CSS（层叠样式表）来创建一个展示多张图片的布局，这种布局通常被称为照片墙或者图片网格。HTML是网页内容的基础结构，而CSS则用于定义这些内容的...
CSS3悬挂的照片墙效果代码
04-06
CSS3悬挂的照片墙效果代码是一款基于CSS3 transform 属性制作悬挂的照片墙效果代码。
html+css+JavaScript实现照片墙特效
01-05
照片墙的实现使用了html+css+JavaScript，点击可以居中显示，取消渐移回到原位
DIV+CSS照片墙
04-07
DIV+CSS3模型也能创造出出色的动画效果
HTML5 + CSS制作一个网络照片墙
nouniuniu的博客
02-02 4476
HTML5 + CSS
HTML5+CSS3实战（二）——照片墙效果
热门推荐
a253664942的专栏
05-01 2万+
现在的前端做的越来越炫酷了，各种特效让人眼花缭乱。 前几天逛网站的时候，看见有个照片墙的效果不错，就想着自己也做做看。 首先上图： 照片呈不规则的角度摆放，当鼠标放在照片上时，照片会放大； 鼠标离开照片时，照片回到原来的状态。 其实只要用CSS3的一些属性完全就可以实现这样的效果，无须一行js代码~~代码实现： html代码部分的代码，就是一个div里放上几张图片而已。 <div cl
HTML实现3D照片旋转墙
gs1we1的博客
04-21 6298
html
CSS照片墙
liugaoyuans的博客
12-13 424
直接ctrl+c用 我是在哔哩哔哩看一个作者现场直接盲敲的，我就没有那么厉害了，看了好几遍，才敲完了 html代码 <body> <div class="main"> <div class="images"> <div style="--img:1"><img src="./img/ (1).jpg" alt=""></div> <div style.
用CSS3设计照片墙
m0_47191887的博客
01-03 486
照片墙 首先来看看效果 这个墙可以环绕起来 并转动 首先清楚一下思路 第一步：可以将这八张照片叠起来 第二步：用CSS3设置3d空间 第三步：分别将这八张图片在3d空间里沿着父级的Y轴分别旋转45，90,135度…（因为360度里分八份）。 第四步：做到这一步会发现，这八张图虽然已经转开，但是还没有彼此产生间距，这个时候用transform属性的translateZ属性将每个图里父级的距离移开，就会形成这个照片墙。 第五步：给父级设置关键帧动画，就可以将整个照片墙旋转起来。 就下来进行代码展示： 第一步：
CSS 3 transform制作漂亮的照片墙
weixin_72303943的博客
07-21 737
CSS 3 transform制作漂亮的照片墙
纯css实现3D立体六面体照片墙
fanfan_code的博客
08-17 1125
Html+css;实现3D六面体照片墙，通过使用动画使其能够旋转起来。
利用动画制作照片墙
06-01
制作照片墙的动画，可以使用CSS3的transition属性和transform属性来实现。下面是一个简单的示例代码： HTML部分 ``` 照片1"> 照片2"> <img src="photo3.jpg" alt="照片3"> ``` CSS部分 ``` ....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值