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);
		}

运行的效果图片如下

发现第二张图并没有隐藏起来，于是我检查了一遍代码，发现.room img2这一句少打了个.,应是.room .img2，
之后两张图到一起啦。

但是到这却出现了另外的一个问题，就是鼠标移上去，第二张图在另外一处显示。

然后我在吃检查一遍，发现粗心的我，漏掉了父容器的相对定位，导致子元素的绝对定位并不是父容器为目标进行定位。加上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 缩放转换。