css3 3d特效汇总
本篇全是实战,没有基础,如果不明白3d特效的原理,可能会看不懂,不过没关系,给你推荐一下 张鑫旭css3 3d转换,或者看我的另一篇博客 css3 2d转换3d转换以及动画的知识点汇总,看完这些3d特效的原理基本就没问题了,下面实战开始
第一个:3d按钮 hover上下翻效果
dom结构
<figure>
<div>
<span class="face">Hover Me</span>
<span class="face">Button</span>
</div>
</figure>
原理:把两个span弄成方块,给figure绑定 hover: hover 时 div 绕x旋转
figure:hover div {
transform: rotateX(-90deg);
}
span.face:nth-child(1) {
color: #fff;
transform: translate3d(0, 0, 30px);
-webkit-transform: translate3d(0, 0, 30px);
} span.face:nth-child(2) {
color: #094b2c;
background: #fff;
transform: rotateX(90deg) translate3d(0, 0, 30px);
-webkit-transform: rotateX(90deg) translate3d(0, 0, 30px);
}
在线 demo
第二个:3d魔方效果
实现效果和 第一个类似 仅仅是 第一个有2个边 这个有6个边而已
第三个:3d旋转图片
第四个:3d旋转地球仪
第五个:3d翻书
这个效果用到了一个 transform-origin属性 这个属性是关键
他是控制坐标轴的 不懂的可以看我的这个文章 css3 2d转换3d转换以及动画的知识点汇总
最后ps:
现在心情非常不好,因为起初这篇文章是写的很详细的,在接近末尾的时候,我竟然把这个网页给关闭了,然后就什么都没有了,唉,是我花了2个小时写的,所以加上心情什么的,就不再重头写,
仅仅把 deom 附上,,,,,,最后又重新截了一边图,以后可得长点心了,
反正都有在线代码,演示,大家先看着,如果真有不太明白的,可以给我评论。我会一一答复的
css3 3d特效汇总的更多相关文章
- 7款外观迷人的HTML5/CSS3 3D特效按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
- 纯css3 3D图片立方体旋转动画特效
纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...
- 7款外观迷人的HTML5/CSS3 3D按钮特效
1.CSS3超酷3D弹性按钮 按钮实现非常简单 今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱. 在线演 ...
- 所有用CSS3写的3D特效,都离不开这些知识
起因 昨晚在做慕课网的十天精通CSS3课程,其中的综合练习是要做一个3D导航翻转的效果.非常高大上. 以往这些效果我都很不屑,觉得网上一大堆这些特效的代码,复制粘贴就好了,够快.但是现实工作中,其实自 ...
- IT兄弟连 HTML5教程 CSS3属性特效 3D变换3
5 3D旋转 在三维变形中,我们可以让元素在任何轴旋转.为此,CSS3新增了三个旋转函数:rotateX().rotateY()和rotateZ().使用rotateX()函数允许一个元素围绕X轴旋 ...
- 8套迷人精致的CSS3 3D按钮动画
1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...
- 分享7款顶级的CSS3动画特效
1.CSS3 SVG文字背景动画 超酷的文字特效 今天我们来分享一款基于CSS3和SVG的文字特效,文字的背景可以定义一些动画特效,在背景动画播放的同时,我们还可以选中文字.本示例让文字背景展示水波和 ...
- 一款非常棒的纯CSS3 3D菜单演示及制作教程
原文:一款非常棒的纯CSS3 3D菜单演示及制作教程 这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大 ...
- 15:CSS3 3D
15:CSS3 3D 什么是3d的场景呢? 2d场景,在屏幕上水平和垂直的交叉线x轴和y轴 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴 Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向 CSS ...
随机推荐
- 诊断:CLSRSC-400: A system reboot is required to continue installing.
Linux7.5安装Grid Infrastructure 12.2.0.1时,在root.sh时会报错 2018/01/30 09:19:28 CLSRSC-330: Adding Clusterw ...
- Vue-cli 3.0自定义脚手架
一.进入项目地址 https://github.com/vuejs/vue-cli ,选择 docs目录查看具体安装流程. 中文文档:https://cli.vuejs.org/zh 可以看到我电脑上 ...
- Samba 学习笔记
这个网站不错.https://www.ibm.com/developerworks/cn/linux/l-lpic3-311-1/
- UVA 1589 象棋
题意: 给出一个黑方的将, 然后 红方有 2 ~ 7 个棋子, 给出摆放位置,问是否已经把黑将将死, 红方已经将军. 分析: 分情况处理, 车 马 炮, 红将情况跟车是一样的. 建一个数组board保 ...
- Springboot+dubbo+zookeeper整合
本想自己搭建一个Spring+dubbo+zookeeper整合好的框架,想寻找个最佳实现但是遇到各种各样的问题,只好自己看看dubbo starter的源码 整理如下: 通过打上断点来看配置的对不对 ...
- JavaWeb 项目,更改本地文件需刷新才有效问题 (tomcat相关)
问题 如果JavaWeb项目需要读取实时更新的本地文件内容,可能遇到必须在更新后手动refresh才能有效的问题. 原因 这是由于项目实际上是运行在Tomcat中,而非本地的工作目录.eclipse可 ...
- MYSQL Sorting result 把队列堆满了,该怎么办?
show processlist;发现有200多个队列,select cardnum from table where xxxid = 31 order by abc_time desc 这样的一个排 ...
- 2018 & 微信小程序
2018 & 微信小程序 Wafer2 快速开发 Demo 本仓库是最简版的 Wafer2 开发套件,建议配合腾讯云微信小程序开发者工具解决方案一起使用.适用于想要使用 Wafer SDK 开 ...
- Github上600多个iOS开源项目分类及介绍
将Github上600多个iOS开源项目进行分类并且有相应介绍,小伙伴们快来看呀 地址:http://github.ibireme.com/github/list/ios/
- zoj2479 Cover the Rectangular Ground
肯定是dfs搜一下的,但是呢存在一个很大的剪枝,也就是面积必定要是相等的,那么如何去操作呢,可以想到的是二进制枚举选取的方法,然后把方法中选取的矩形面积求和并判断一下即可,然后dfs搜索,要注意的是, ...