关于Css3中的图片旋转问题

在CSS3中定义元素旋转的方法，以下代码实现如何使元素在旋转中实现元素具有双面的效果
代码中用两种方法实现了这个效果，注释部分通过z-index控制图片的显示通过渐变使之在旋转中实现交替达到一张图片拥有两个不同面的效果
第二种方法就是使用backface-visibility使图片在旋转后背面隐藏的效果实现两张图片的无缝连接达到效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
<style type="text/css">
*{
                margin:0;
                padding: 0;
            }
.container-1{
		width: 900px;
		height: 400px;
		margin: 0 auto;
		/*background: yellow;*/
		display: block;
		margin-top: 100px;
        position: relative;
		background: hotpink;
	}
				
.img-1-1 {
	position: relative;
	width: 300px;
	height:300px;
	margin:0 auto;
	border-radius: 50%;
}
.img-1-1:before{
	transition: 1s;
	content:"";
	display: block;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	position: absolute;
	background: url(img/bg-1.png);
	transform: rotateY(180deg);
	backface-visibility: hidden;
}
.img-1-1:after{
	transition: 1s;
	content:"";
	display: block;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: url(img/bg-2.png);
	position: absolute;
	backface-visibility: hidden;
}

.img-1-1:hover:before{
	transform: rotateY(0deg);
}
.img-1-1:hover:after {
	transform: rotateY(180deg);
	}
/* .img-1-1 img {
    transition: 0.5s;
	display: block;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	position: absolute;
	margin:0 auto;
}
.img-1-1>img:nth-of-type(1){
    transform: rotateY(180deg);
    z-index: 0;
}
.container-1:hover .img-1-1>img:nth-of-type(1) {
     transform: rotateY(0deg);
     z-index: 1;
 }
.container-1:hover  .img-1-1>img:nth-of-type(2){
        transform: rotateY(180deg);
    } 
    */
		</style>
	</head>
	<body>
		<div class="container-1">
			<div class="img-1-1">
<!-- 			<img src="img/bg-1.png" >
				<img src="img/bg-2.png" > -->
			</div>
		</div>
	</body>
</html>

关于Css3中的图片旋转问题

猜你喜欢