文章目录[x]
- 1:图片翻转的实现:
- 2:图像旋转
用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>