html+css实现图片翻转及图像旋转

图片翻转的实现：

代码实现：

<style type="text/css">
		.box{
			width:700px;
			height:272px;			
			border:3px solid #000;
			margin:50px auto 0;
			position:relative;
			/* 让容器里面的元素按照3d空间显示（规范写法）  */ 
			transform-style:preserve-3d;
		}
		.box img{
			width: 300px;
			height: 272px;
			position:absolute;
			left:200px;
			top:0;
			transform:perspective(800px) rotateY(0deg);
			transition:all 500ms ease;
			backface-visibility:hidden;
		}		
		.box:hover img{
			transform:perspective(800px) rotateY(180deg);
		}
		.box .back{
			width:300px;
			height:272px;
			background-color:pink;
			position:absolute;
			left:200px;
			top:0;
			font-size:20px;
			text-align:center;
			line-height:272px;
			transform:perspective(800px) rotateY(-180deg);
			transition:all 500ms ease;
			backface-visibility:hidden;
		}
		.box:hover .back{
			transform:perspective(800px) rotateY(0deg);
		}
	</style>

<!--这里是body的内容-->
<div class="box">		
		<img src="C:/Users/SGYZ/Desktop/桌面/yvam.jpg" alt="背景图">
		<div class="back">
			这里是图片的背后
		</div>
	</div>

图像旋转

样式代码：

<style type="text/css">
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 50px auto 0;
background:url(location_bg.jpg) -42px -70px no-repeat;
border-radius: 100px;
transform: rotate(odeg);
transition: all 1s ease;
}
.box:hover{
transform: rotate(360deg);
}

</style>