css实现图片翻转动画

主要是将两张图片重叠放在一起，然后实现翻转
使用 backface-visibility:hidden 属性，让正面图的背面不显示

效果:

html:

<view class="icon_img">
//正面图<image class="zhengImg rotateAmview" src="http://cdn.za3.cn/official_img/index/home_bg.png"></image>
//背面图<view class="fanImg rotateAmview"><image  src="http://cdn.za3.cn/official_img/index/home_video.png"></image></view></view>

css:

.icon_img{width: 350rpx;height: 300rpx;position: relative;margin: 0 auto;.zhengImg{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index:1;backface-visibility:hidden;}.fanImg{width: 100%;height: 100%;position: absolute;top: 0;left: 0;image{top: 0;left: 0;width: 100%;height: 100%;transform: rotateY(180deg);}}@keyframes rotateAm{0%{transform: scale(1,1) translate3d(0, 0, 0) rotateY(0deg);bottom: 0;}5%{transform: scale(1.4,0.6);bottom: 3%;}10%{transform: scale(1,1);bottom: 0;}15%{transform:scale(1,1) translate3d(0, 0, 0) rotateY(180deg);}50%{transform:scale(1,1) translate3d(0, 0, 0) rotateY(180deg);}55%{transform: scale(1.4,0.6) rotateY(180deg);bottom: 3%;}60%{transform: scale(1,1) rotateY(180deg);bottom: 0;}65%{transform: scale(1,1) translate3d(0, 0, 0) rotateY(0deg);}}.rotateAmview{transform:translate3d(0, 0, 0) ;transform-origin: center center;animation: rotateAm 12s  linear  infinite;animation-fill-mode: forwards;position: absolute;bottom: 0;left: calc(50% - 43rpx);}}

css实现图片翻转动画相关推荐

拐道交叉的css3动画,CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
图片自动翻转css代码,用css实现图片翻转(示例代码)
简介这篇文章主要介绍了用css实现图片翻转(示例代码)以及相关的经验技巧,文章约1193字,浏览量447,点赞数1,值得参考! 用css实现图片翻转 .flip-container { perspec ...
CSS 实现图片翻转
今天学到一个CSS的小知识,记录分享一下:就是使用CSS来实现图片翻转-------把鼠标放在图片上时可以翻转图片,移开后又恢复原状话不多说,直接上代码: <!DOCTYPE html> ...
HTML和CSS实现图片翻转效果
实现图片翻转,首先来分析一下我们希望实现的是怎样的翻转效果?又该如何去实现呢? 一.希望实现的效果页面上的图片在光标悬停在上面的时候会发生翻转效果,翻转过后显示出背面的说明文字. 鼠标没有悬停在上面 ...
CSS打造图片翻转立体3D效果
一.案例效果展示二.搭建一个基本的html结构,将需要用到的图片居中 html的结构非常简单,只要一个盒子里面放二张照片即可 html代码: <div class="img_box& ...
android局部翻转动画,android实现图片翻转动画
效果如下(gif1): 怎么做呢?文章有点长,看官请静下心来好好看看.碰到不懂的地方查查API. Android中并没有提供直接做3D翻转的动画,所以关于3D翻转的动画效果需要我们自己实现,那么我们首 ...
css圆点图片呼吸动画效果,css动画实现呼吸圆
圆动画 .content{ width: 300px; height: 400px; background-color: #333; margin: 0 auto; } div{ box-sizing ...
暑期学习日记35：图片缩放动画
今天学习了使用html+css实现图片缩放动画,将鼠标移动到图片上会使图片放大. 代码如下: <!doctype html> <html> <head> <m ...
css照片翻转动画（当鼠标悬停在图片上方时图片翻转）
css照片翻转动画第一次写博客也不知道怎么排版有什么建议私信我 - 鼠标悬停时图片旋转到垂直于视线的90度位置文字介绍旋转在垂直于视线的位置这是html代码 <!DOCTYPE h ...

css实现图片翻转动画

css实现图片翻转动画相关推荐

最新文章

热门文章