前言

最近学了一些前端（主要是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 3D画廊旋转js特效
下载地址一个创造性的.自动旋转画廊,纯CSS代码实现的相册,通过图像旋转一个3d空间.旋转动画核心代码.rotator { position: absolute; left: 0; right: 0 ...
基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div clas ...
解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果一.前言最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
css 缩放_【开发小技巧】06—如何使用CSS在鼠标悬停时缩放图像？
英文 | https://www.geeksforgeeks.org/how-to-zoom-an-image-on-mouse-hover-using-css/?ref=rp翻译 | web前端开发 ...
php 旋转图片并保存,如何在PHP中旋转并保存图像
在PHP中旋转并保存图像的方法:首先使用函数[imagerotate()]用给定角度旋转图像:然后使用函数[imagejpeg()]输出图象到浏览器或文件,代码为[imagejpeg ( resour ...
php 旋转图片保存,如何在PHP中旋转并保存图像
在PHP中旋转并保存图像的方法:首先使用函数[imagerotate()]用给定角度旋转图像:然后使用函数[imagejpeg()]输出图象到浏览器或文件,代码为[imagejpeg ( resour ...
HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
CSS控制背景颜色和背景图像的方法
Web前端培训中比较重要的一环是网页的设计,网页能通过背景图像给人留下第一印象,如节日题材的网站一般采用喜庆祥和的图片来突出效果,所以在网页设计中,控制背景颜色和背景图像是一个很重要的步骤.下面将详细 ...
css动画-3d旋转盒子
css动画-3d旋转盒子效果图: 思路: 1.一个容器,装6个子容器放6张图(我是采用的ul列表) <ul class="container"><li id=& ...

CSS实现可以旋转的两面图像

目录

前言

实例