css实现图片翻转效果

如何实现图片翻转效果

在网页中无意之间看到一个图片翻转的效果,于是在CSDN中查找资料,看看是如何完成翻转图片这个效果的。

以下代码是看完资料初次尝试写出这个代码。

.room{
			width: 450px;
			height: 300px;
		}
		.room .img1{
			width: 100%;
			height: 100%;
		}
		.room:hover .img1{
			transform: rotateY(-90deg);
		}
		.room img2{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			text-align: center;
			background: url("../img/line11.jpg");
			background-size: 100% auto;
			transform: rotateY(-90deg);
		}
		.room:hover img2{
			transform: rotateY(0);
		}

运行的效果图片如下

css实现图片翻转效果_第1张图片
发现第二张图并没有隐藏起来,于是我检查了一遍代码,发现.room img2这一句少打了个.,应是.room .img2,
之后两张图到一起啦。
css实现图片翻转效果_第2张图片
但是到这却出现了另外的一个问题,就是鼠标移上去,第二张图在另外一处显示。
css实现图片翻转效果_第3张图片
然后我在吃检查一遍,发现粗心的我,漏掉了父容器的相对定位,导致子元素的绝对定位并不是父容器为目标进行定位。加上position: relative;后就好啦。
但是这个时候却没有动态效果,只是一瞬间就变了。
于是发现加上transition: all 1s ease-in-out 0s;这一句就有变换的效果了;

期间遇到的问题(查阅资料解决)

1.transition: all 1s ease-in-out 0s;

代表的含义------执行变换的属性:transition-property,
变换延续的时间:transition-duration,
在延续时间段,变换的速率变化transition-timing-function,
变换延迟时间transition-delay
属性值:
1、ease:(逐渐变慢)默认值

2、linear:(匀速)

3、ease-in:(加速)

4、ease-out:(减速)

5、ease-in-out:(加速然后减速)

2.transform

transform:transform属性向元素应用 2D 或 3D 转换。允许我们对元素进行旋转、缩放、移动或倾斜。
部分属性含义:
1.rotateX(angle) 定义沿着 X 轴的 3D 旋转。
2.rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
3.rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
4.scaleX(x) 通过设置 X 轴的值来定义缩放转换。
5.scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
6.scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。

你可能感兴趣的:(css实现图片翻转效果)