CSS中如何让照片实现翻转和模糊?

发布网友发布时间：2022-04-06 11:23

我来回答

共5个回答

懂视网时间：2022-04-06 15:44

本篇文章给大家带来的内容是关于如何使用css实现翻转图片的效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

具体效果图如下：

主要用到的技术除了3D翻转和定位，还用到了一个新的属性 backface-visibility：visable|hidden;

该属性主要是用来设定元素背面是否可见。

具体的步骤如下：

1、写出页面主体，

 <div>
 <img src="Images/b.jpg" alt="">
 <img src="Images/c.jpg" alt="">
 </div>

2、通过定位使两张图片叠加在一起

div img {
  width: 250px;
  height: 170px;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s;
 }

3、设置第一张图片背面不可见

div img:first-child {
  z-index: 1;
  backface-visibility: hidden;
 }

4、添加旋转180度

div:hover img {
  transform: rotateY(180deg);
 }

最后给出完整代码

<!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 /* backface-visibility */
 
 div {
  width: 250px;
  height: 170px;
  margin: 100px auto;
  position: relative;
 }
 
 div img {
  width: 250px;
  height: 170px;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s;
 }
 
 div img:first-child {
  z-index: 1;
  backface-visibility: hidden;
 }
 
 div:hover img {
  transform: rotateY(180deg);
 }
 </style>
</head>

<body>
 <div>
 <img src="Images/b.jpg" alt="">
 <img src="Images/c.jpg" alt="">
 </div>
</body>

</html>

热心网友时间：2022-04-06 12:52

filter:FlipH(); 水平翻转对象内容！
filter:FlipV(); 垂直翻转对象内容。
filter:blur();模糊效果!
代码加在HTML容器Css属性设置里！
所加载的容器要有有效的高和宽！！
filter只有IE浏览器支持的！
如果不会设置HTML的CSS，那就麻烦了！

热心网友时间：2022-04-06 14:10

用CSS的filter滤镜效果可以实现，具体的参数你一下一大片
代码<head> </head>中或者放到<body>标签中也可以要看你想实现的范围

热心网友时间：2022-04-06 15:45

滤镜效果

热心网友时间：2022-04-06 17:36

不给分就想求答案？ http://video.qq.com/videopl.htm?v=3aGYOKDDlwI 自己看去