请选择 进入手机版 | 继续访问电脑版

css3线框翻转特效

发表于 01-11 11:39 显示全部楼层 9 84

css3线框翻转特效


        这次制作的是css3制作的线框翻转特效,效果如图:


GIF.gif


        制作方法:

        

        先书写静态布局,然后设置鼠标移上调整遮罩层的不透明度(opacity)和文字的位置,通过转换属性(transform)设置图片等比放大,主要是线框翻转实现,线框翻转实际上是横向的线框沿着Y轴旋转360度(transform:rotateY(360deg);),纵向的线框沿着X轴旋转360度(transform:rotateX(360deg);),重点在于要给线框的父级设置透视属性(perspective)才会有立体感,最后切记所有变化元素初始状态加上过渡(transition),才能实现动画过渡的效果。


        案例源码下载:


        链接: https://pan.baidu.com/s/1pNqR7QV 

        密码: pnmg


        新浪微博有详细的视频教程,欢迎关注:


微信图片_20180111112623.jpg




回复 使用道具
举报
sup

发表于 01-20 01:48 显示全部楼层

回复 支持 反对 使用道具
举报
追风筝的孩子

发表于 01-15 14:39 显示全部楼层

前排支持!!

回复 支持 反对 使用道具
举报
扯起嘴角冷笑

发表于 01-12 18:58 显示全部楼层

观后纵想法再多,也不如一句回复实在!

回复 支持 反对 使用道具
举报
谁和我同名

发表于 01-11 23:59 显示全部楼层

给楼主32个赞!!!!!

回复 支持 反对 使用道具
举报
monkeye

发表于 01-11 15:54 显示全部楼层

楼主再见

回复 支持 反对 使用道具
举报
仰光的阳光

发表于 01-11 13:19 显示全部楼层

回复 支持 反对 使用道具
举报
我爱大菠萝

发表于 01-11 12:18 显示全部楼层

顶!顶!顶!

回复 支持 反对 使用道具
举报
cocoabird

发表于 01-11 11:47 显示全部楼层

给楼主32个赞!!!!!

回复 支持 反对 使用道具
举报
淡蓝心情

发表于 01-11 11:43 显示全部楼层

楼主你好

回复 支持 反对 使用道具
举报

发表新文章
欧水萍

小码哥名师团队

0

学分

1732

学币

1902

积分

小码哥名师团队

Rank: 5Rank: 5

积分
1902
Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育