关于Css3中的图片旋转问题_css 3d旋转会被背景遮住-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_32021025/article/details/84786890

在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>