css头像翻转实例

最新推荐文章于 2020-03-13 11:40:00 发布

Sunny_can

最新推荐文章于 2020-03-13 11:40:00 发布

阅读量678

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/can_Sunshine/article/details/53306257

css 专栏收录该内容

3 篇文章

订阅专栏

本文通过一个具体的示例展示了如何使用CSS3实现一个具有翻转动画的圆形盒子，包括两个面的不同背景图片及鼠标悬停时的旋转效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
border-radius: 50%;
margin: 100px auto;
position: relative;
}
.box div{
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
background: url(img/1463364415735.jpg) no-repeat center 0;
background-size: cover;
border-radius: 50%;
transition: .5s;

}
.box div:nth-child(2){
transform-origin: bottom;
background-image: url(img/20150907161026_xNyKj.jpeg);
}

.box:hover div:nth-child(2){
transform: rotateX(180deg);
}
.box:hover div:nth-child(1){
transform: rotate(360deg);
}
</style>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>