admin管理员组

文章数量:1794759

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

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

目录
  • 前言
  • 实例
    • CSS实现旋转图像
      • 代码：
      • 效果：
    • CSS实现一面图像一面文字
      • 错误版本：
      • 错误解释
      • 正确版本
      • 效果
    • 双面图像
  • 结语

前言

最近学了一些前端（主要是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图片大小限制图片质量不佳请见谅

双面图像

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

结语

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

本文标签： 硬币两面图像效果css

版权声明：本文标题：CSS实现可以旋转的两面图像（硬币效果） 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686971305a123910.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。