CSS实现可以旋转的两面图像（硬币效果）

当时若只如初见

已于 2023-03-04 19:07:03 修改

阅读量1.8k

点赞数 1

分类专栏： web 前端文章标签： css3 html

于 2021-03-23 20:26:58 首次发布

本文链接：https://blog.csdn.net/qq_30913955/article/details/115097451

版权

web 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

前言

最近学了一些前端（主要是CSS）的知识，看到3D效果时突发奇想——能不能做一个像硬币一样的两面图像呢？经过了几次的尝试和失败后便有了这篇文章。这篇文章从如何实现旋转开始一步步逼近最后的结果。（其实只有两步但是我相信看完后只要稍作修改就能实现两面图像的效果，本文只是将第二张图像变为了一个有背景的文字）要看这篇文章必须有一定的CSS基础，小白建议去W3School或菜鸟教程了解有关知识。

实例

CSS实现旋转图像

代码：

<!DOCTYPE html>
<html>
<head>
<style>

#person
{
width: 100px;
height:100px;
border-radius: 50%;
/*将圆角50%给一个宽高相等的元素会将其裁成圆形*/
transition: transform 1.5s;
/*设置不同样式之间过渡的持续时间*/
}

#person:hover
{/*这是伪类，当鼠标移到id为person上时触发，鼠标移走复原*/
transform: rotateY(180deg);
/*意思是让图像的中间轴旋转180度*/
}

</style>
</head>

<body>

<img id="person" src="photo/boy.jpeg" alt="boy" />
 <!--相应路径放照片即可-->
</body>
</html>

效果：

图像翻转

CSS实现一面图像一面文字

错误版本：

<!DOCTYPE html>
<html>
<head>
<style>

#user
{
/*使用一个div作为图片和文字背景的父元素，让div旋转即可让文字和图片旋转*/
width: 100px;
height: 100px;
position: relative;/*设置成这个以便图片和文字absolute定位*/
overflow: hidden; 
transition: transform 1.5s, border-radius 1.5s;
/*设置过渡时间*/
}

#user:hover
{
border-radius: 50%;
/*div由正方形变为圆形*/
transform: rotateY(180deg);
/*旋转180度展示反面*/
}

#photo
{
width: 100px;
height: 100px;

position: absolute;
top: 0;
left: 0;

z-index: 1;/*此处后面有解释*/
}

#name
{
background-color: black;
color: white;

width: 100px;
height: 100px;
margin: 0;/*为了对齐外边距设置为0*/

position: absolute;
top: 0;
left: 0;

text-align: center; 

z-index: 0;/*此处后面有解释*/
transform: scaleX(-1);
-ms-transform: scaleX(-1);
/*反方向一倍拉伸x坐标，即得镜像，跟随div旋转之后便是正的*/
}

</style>
</head>

<body>
<div id="user">
<img id="photo" src="photo/boy.jpeg" alt="boy" />
<p id="name">Lee</p>
 </div>
</body>
</html>

错误解释

本来想的是设置图片的z-index是1，文字的z-index是0，文字正常情况下是镜像，这样的话一旋转本来是在下面的文字就会跑到上面来，镜像也会翻转为正常。但是经过试验这样不行（读者可以再试一下加深印象），原来是因为浏览器并不是按我想象的那样运作，实际上z-index大的始终在z-index小的上面，那么解决办法也就显而易见了——在过渡动画里加入z-index的变化。正确版本如下：

正确版本

（仅对与错误版本不同的地方做出解释）

<!DOCTYPE html>
<html>
<head>
<style>

#user
{
width: 100px;
height: 100px;
position: relative;
overflow: hidden; 
transition: transform 1.5s, border-radius 1.5s;
}

#user:hover
{
border-radius: 50%;
transform: rotateY(180deg);
}

#photo
{
width: 100px;
height: 100px;

position: absolute;
top: 0;
left: 0;

z-index: 1;
transition: z-index 1.5s;
/*添加z-index的过渡动画*/
}

#photo:hover
{
z-index: 0;/*由1变0*/
}

#name
{
background-color: black;
color: white;

width: 100px;
height: 100px;
margin: 0;

position: absolute;
top: 0;
left: 0;

text-align: center; 

z-index: 0;

transform: scaleX(-1);
-ms-transform: scaleX(-1);

transition: z-index 1.5s;
/*添加z-index的过渡动画*/
}

#name:hover
{
z-index: 1;/*由0变1*/
}


</style>
</head>

<body>
<div id="user">
<img id="photo" src="photo/boy.jpeg" alt="boy" />
<p id="name">Lee</p>
 </div>
</body>
</html>

效果

双面图像
因CSDN图片大小限制图片质量不佳请见谅

双面图像

开动你的大脑自己去实现吧！

结语

如果你看了上面两部分我相信双面图像对你来说不是一件难事，自己去试试吧，我这篇文章就算抛砖引玉了。

当时若只如初见

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS实现可以旋转的两面图像（硬币效果）

CSS实现旋转图像代码：效果：CSS实现一面图像一面文字，像硬币的正反面一样最近学了一些前端（主要是CSS）的知识，看到3D效果时突发奇想——能不能做一个像硬币一样的两面图像呢？经过了几次的尝试
复制链接

扫一扫