CSS3翻转图片问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3翻转图片问题相关的知识，希望对你有一定的参考价值。
<style>
div
width:500px;
height:300px;
background-image:url(111.jpg);
-webkit-transition: -webkit-transform 5s;
div:hover
-webkit-transform:rotateY(180deg);
</style>
代码在这，现在可以实现图片翻转效果， 想问一下加什么代码可以实现翻转过去是另一张图片，也就是说翻转90度以后第一张图片应该是消失的，然后另一张图片继续展开到结束
其实这个效果就是把图片宽度按比例缩小到0然后宽度变大，只不过图片再宽度变大的时候是反过来的
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
目前情况下，正确的方式在目前是通过js配合css实现，css3距离普及还早着呢。目前主流浏览器对css3和html5的实现方式完全不一样，所以都得单独设置。追问
我主要就是用Chrome浏览器 这个没什么问题 所以别的我都省略了 只用-webkit前缀
追答...做网站貌似是给别人看的吧。。。
追问我知道是给别人看，关键是现在自己用固定的一个浏览器都实现不了。，还拿什么给别人看
追答目前css3实现不够稳定，各个浏览器差异很大。不如直接通过js事件在鼠标悬停时切换图片，或者切换显示/隐藏状态。这才是主流的实现方式。
追问因为要学CSS3 所以才尝试做这个效果，如果用JS+CSS实现别的效果，那不就跟CSS3没关系了么，谢谢你了
追答我也学过一些CSS3的东西，所以也大体了解一些；但在工作中完全用不到，因为不能要求浏览者用特定的浏览器。CSS2已经存在一堆未解决的兼容性问题了，CSS3估计以后才能正式能被大家接受。
追问既然有了CSS3和HTML5 就总有一天会普及代替CSS2和HTML4.0 ，总会用到的
参考技术A div:hover 里面透明度设置为1 ，就是不透明，添加背景图片background-image就可以了~按理说这种方法是错的。你要2面都有内容的话，需要2个div，分别代表正面的内容和反面的内容才行。 参考技术B 尝试在div:hover
-webkit-transform:rotateY(180deg);
background-image:url(222.jpg);
里加上另一张背景呢？追问
这个试过了 是不行的，如果加另一个背景，效果就是 当前背景图旋转180度以后直接变成另一张图片
追答由于时间比较紧张，为你提几个思路吧：
1、在此层下建立一个层，上层覆盖下层，当hover时上层变，下层也变，使动画连贯起来。
2、尝试透明度降低，虽然比较凑合，但或许能实现效果。
3、JS方式，翻转90，然后替换图片，就是比较硬性的过程了。
嗯 我再想想办法 谢谢你了
纯css3动画原理做图片翻转效果
这是一种很经典的效果，之前看了很多品牌网站都会用到这种效果，有需要写这种效果的伙伴可以练习一下。
需要更多企业常用学习案例，项目实战，学习方法可以加一下我的前端群611256580，每天都会精选一个特效分享！
css3解析动画源码：
<!doctype html>
<html lang="en">
<head>
<!--声明当前页面的编码格式 国际编码 UTF-8 中文编码 GBK-->
<meta charset="UTF-8">
<!--声明当前页面的三要素-->
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>please enter your title</title>
<!--样式css 修饰 衣服 化妆品-->
<style type="text/css">
*{/*通配符 网页所有元素标签*/
margin:0;
}
.box{
width:900px;/*宽度 px像素 cm m ml... em rem vh ....*/
height:575px;/*高度*/
margin:50px auto 0;/*上右下左 上 左右 下 上下 左右 全部 auto自动*/
}
.c-box{
width:280px;
height:575px;
}
.left{
float:left;
}
.center{
float:left;
margin-left:30px;
}
.right{
float:right;
}
.cen-box{
width:280px;
height:280px;
}
.center .pic,.right .txt{
margin-top:15px;
}
.txt-style{
background:#804000;
font-size:12px;
font-family:"微软雅黑";/*字体类型*/
}
.txt-style h2{
font-size:40px;
color:#EB614A;
text-align:center;/*对齐方式 center right left*/
padding-top:80px;
}
.txt-style h3{
color:#EB614A;
padding:0 20px;
}
.txt-style p{
color:#fff;
padding:0 20px;
line-height:25px;
}
img{
animation:mov 5s infinite; /*自定义动画 动画名称 时间 次数*/
}
h2{
animation:txtShadow 5s infinite;
}
@keyframes mov{
from{
transform:rotateY(0deg);
}
to{
transform:rotateY(360deg);
}
}
@keyframes txtShadow{
0%{
text-shadow:0 0 0 #ff0;
}
25%{
text-shadow:0 0 10px #f00;
}
50%{
text-shadow:0 0 10px #ff0;
}
75%{
text-shadow:0 0 10px #f0f;
}
100%{
text-shadow:0 0 0 #ff0; /*x y 模糊度 颜色*/
}
}
</style>
</head>
<body>
<!--
1.div盒子 有高度 宽度 存放内容的一个区域 一块空间
2.取名的方式 class(姓名 重复 .) id(唯一 身份证号码 #)
-->
<div class="box">
<div class="left c-box">
<img src="images/1.jpg" alt="" width="280" height="575" />
</div>
<div class="center c-box">
<div class="txt cen-box txt-style">
<h2>Jeremy Scott</h2>
<h3>潮人徐峰立独家解读</h3>
<p>对顽童而言果然什么都能穿。万花筒似的秀上能找到毛茸茸的史迪奇，晕眩状圈圈，暴怒的 海绵宝宝，杀死比尔套装，甚至一个篮球（是的，一个穿在身上的篮球！）。</p>
</div>
<div class="pic cen-box">
<img src="images/2.jpg" alt="" width="280" height="280" />
</div>
</div>
<div class="right c-box">
<div class="pic cen-box">
<img src="images/3.jpg" alt="" width="280" height="280" />
</div>
<div class="txt cen-box txt-style">
<h2>Jeremy Scott</h2>
<h3>潮人徐峰立独家解读</h3>
<p>对顽童而言果然什么都能穿。万花筒似的秀上能找到毛茸茸的史迪奇，晕眩状圈圈，暴怒的 海绵宝宝，杀死比尔套装，甚至一个篮球（是的，一个穿在身上的篮球！）。</p>
</div>
</div>
</div>
</body>
</html>
文档源码已上传群文件，有需要的效果版可以加群获取
点击“阅读原文”也可加入群
以上是关于CSS3翻转图片问题的主要内容，如果未能解决你的问题，请参考以下文章