推荐使用、下载，请使用解压文件；
下载本站资源，如服务器暂不能下载请过一段时间再试；
本站资源通过 、 等软件检测；
本站部分资源供学习交流使用，如商业用途，请购正版。
网友对“CSS3实现各种炫酷图片遮罩和缩放动画特效源码”的评论
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
& 下一篇：
您喜欢这个源码么？
本类热门源码
增值电信业务经营许可证:苏B2-CopyRight ©
All Rights reserved.购买了该PPT的用户还购买了
推荐PPT专题
相关PPT主题
相关PPT分类
超高端扁平化卡片式设计多用途PPT模板（附赠教程）
积分：300分 积分获取请
V I P：260分 如何成为VIP会员?单次充值100元，VIP有效期三个月。
你可能喜欢的PPT
超高端扁平化卡片式设计多用途PPT模板（附赠教程）详细信息
spyputin的文章
超高端扁平化卡片式设计多用途PPT模板（附赠教程）用户评论当前位置：
时尚炫酷卡片集合图片
&&&&星级：
编号：上传时间：大小：1.385 M
尺寸：0×0像素 格式：AI (CS6)颜色：RGB
扫一扫，下载知聊
关&键&词：时尚 时尚卡片 卡片 名片 动感 潮流 潮流卡片 新潮 现代 炫酷 炫酷卡片 酷炫 图形 时尚图形 矢量 矢量卡片 三角形 绿色 红色 褐色 紫色 动感卡片 动感背景 时尚背景 潮流背景 背景 矢量背景 合集 集合 卡片集合 矢量图 设计 广告设计 名片卡片
图片描述：
&昵图网所有作品均是用户自行上传分享并拥有版权或使用权，仅供网友学习交流，未经上传用户书面授权，请勿作他用。若您的权利被侵害，请联系 。
商用正版图片如何做出炫酷的卡片动画1 - 简书
下载简书移动应用
写了70697字，被7168人关注，获得了4872个喜欢
如何做出炫酷的卡片动画1
如何做出炫酷的卡片动画1
这是我们想要实现的动画效果。
拿到这个GIF，首先，把第一帧导出为PNG，然后仔细研究一下。
这个页面为什么有3D的效果？经过我的分析，我发现有这么几点。1.多层卡片Y轴有不同，越往后的图片Y轴越小，应该设定一个常数，用来做Y轴的递减。2.越往后的卡片宽度也是有所递减的，应该也是设定一个常数，然后做宽度的递减。3.透明度也和上面的规律相同，越往后的图片透明度越高。
4.这个卡片图层肯定是需要reuse的，因为设置大概5-8张卡片就完全能实现这种3D效果，而且后面的卡片由于看不见的原因所以当前面的卡片滑走之后可以用来reuse。5.应该有两种手势，一种是Tap来翻转card，一种是Pan手势。6.pan手势略复杂，它分为两种情况，第一种应该是手指移动距离在0-X这个距离的时候所有card往手指滑动方向倾斜，并且有层次效果。当移动距离大于X这个临界值的时候第一张卡片滑走。7.第一张卡片滑走之后剩下的所有图片一是向前移动，二是由之前左或右倾斜的角度恢复原状。
说得多不如做的多。我们新建一个工程，然后把ViewController背景色改成（250，102，130），然后添加三张ImageView，重叠放置。都添加下列约束。更改下三个imageview的背景色，分别设为不同背景色。
饭要一口一口吃，我们先不考虑手势什么的动态效果，我们第一步先实现，看来像立体的。首先，根据第一条，我们这三张的图片，后一张比前一张的要高一点，那就是Y轴后一张比前一张要小，那么我们有两种选择，第一个是直接更改第二张图片的frame，让imageView2.y = imageView1.y-5(这个数字可以随便)，还一种就是利用CATransform的translate方法更改，哪一种更好呢？我认为利用transform的translate更改更好。为什么？利用transform更改得好处在于，如果多个子layer的transform不同，那么你更改他们的父layer的tansfrom的时候，他们的子layer会根据自身的transfrom做出不同的变化，这是你更改frame不能达到的效果，可能这么说有点抽象，后面会详细说明的。
NSArray *arr = @[_imageView3,_imageView2,_imageView1];
我们先把我们的3个imageview加入数组，方便我们更改他们的属性。
CATransform3D perspective = CATransform3DI
perspective.m34 = -2.5/2000;
for (int i =0; i&arr. i++) {
UIImageView *img = arr[i];
img.layer.transform =
img.layer.transform = CATransform3DTranslate(img.layer.transform, 0, i*-5, 0);
img.layer.cornerRadius = 5;
img.layer.masksToBounds = YES;
这段设置图片的圆角，perspective这个transform设置M34这个参数主要是为了设置imageview的透视，作用是当你的imageview在X轴或Y轴或Z轴做rotation的时候会有3D的感觉。CATransform3DTranslate这个函数为什么要带上img.layer.transform呢？因为图像做transform变化的时候是矩阵的相乘，要求用图像本身的当前transform去乘以要变化的transform得到新的transform。感兴趣的可以自行谷歌。然后我们运行一下看看效果。
我们的viewcontroller
很丑，但是Y轴的距离感已经有了。第一条搞定了，我们再来搞宽度变化这个问题。我们用transform来改变imageview的scale，不直接改frame的width道理同上。不再赘述。
img.layer.transform = CATransform3DScale(img.layer.transform, 1-0.1*i, 1, 1);
上面那个函数后面三个参数分别代表（x，y，z），我们的参数意思是在X轴上做变化，Y和Z轴不变化，因为参数是1，乘以1不还等于原值么。我们运行一下。
我们的viewcontroller
哎呦，不错哦，有点样子了。最后一个，透明度。
img.layer.opacity = 1-0.1*i;
再运行一下，恩，可以。
我们的viewcontroller
但是感觉还缺点东西，我们绕着X轴转点角度试试。
img.layer.transform = CATransform3DRotate(img.layer.transform, -1*M_PI/180, 1, 0, 0);
感觉立体多了。
我们的viewcontroller
今天，先写到这，后面我们为这些图片添加手势和动态特效。项目的github地址：
如果你认为这篇文章不错，也有闲钱，那你可以用支付宝扫描下方二维码随便捐助一点，以慰劳作者的辛苦
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
· 4244人关注
· 1250人关注
一颗星星问月亮：它什么时候能成为下一个太阳！
· 713人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：分享8个难忘的HTML5炫酷动画及源码 | HTML5资源教程}