本篇全是实战,没有基础,如果不明白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个边而已

demo

第三个:3d旋转图片

demo

第四个:3d旋转地球仪

demo

第五个:3d翻书

这个效果用到了一个    transform-origin属性  这个属性是关键

他是控制坐标轴的    不懂的可以看我的这个文章   css3 2d转换3d转换以及动画的知识点汇总

最后ps:

现在心情非常不好,因为起初这篇文章是写的很详细的,在接近末尾的时候,我竟然把这个网页给关闭了,然后就什么都没有了,唉,是我花了2个小时写的,所以加上心情什么的,就不再重头写,

仅仅把  deom 附上,,,,,,最后又重新截了一边图,以后可得长点心了,

反正都有在线代码,演示,大家先看着,如果真有不太明白的,可以给我评论。我会一一答复的

css3 3d特效汇总的更多相关文章

  1. 7款外观迷人的HTML5/CSS3 3D特效按钮特效

    下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...

  2. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

  3. 7款外观迷人的HTML5/CSS3 3D按钮特效

    1.CSS3超酷3D弹性按钮 按钮实现非常简单 今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱. 在线演 ...

  4. 所有用CSS3写的3D特效,都离不开这些知识

    起因 昨晚在做慕课网的十天精通CSS3课程,其中的综合练习是要做一个3D导航翻转的效果.非常高大上. 以往这些效果我都很不屑,觉得网上一大堆这些特效的代码,复制粘贴就好了,够快.但是现实工作中,其实自 ...

  5. IT兄弟连 HTML5教程 CSS3属性特效 3D变换3

    5  3D旋转 在三维变形中,我们可以让元素在任何轴旋转.为此,CSS3新增了三个旋转函数:rotateX().rotateY()和rotateZ().使用rotateX()函数允许一个元素围绕X轴旋 ...

  6. 8套迷人精致的CSS3 3D按钮动画

    1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...

  7. 分享7款顶级的CSS3动画特效

    1.CSS3 SVG文字背景动画 超酷的文字特效 今天我们来分享一款基于CSS3和SVG的文字特效,文字的背景可以定义一些动画特效,在背景动画播放的同时,我们还可以选中文字.本示例让文字背景展示水波和 ...

  8. 一款非常棒的纯CSS3 3D菜单演示及制作教程

    原文:一款非常棒的纯CSS3 3D菜单演示及制作教程 这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大 ...

  9. 15:CSS3 3D

    15:CSS3 3D 什么是3d的场景呢? 2d场景,在屏幕上水平和垂直的交叉线x轴和y轴 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴 Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向 CSS ...

随机推荐

  1. 牛客网提高组第二场---solution

    T1 方差 根据题目要求将式子先写出来注意下面式子中的 $n$ 全部都是 $n-1$$$\begin{aligned}ans&=n^2\times \frac{1}{n}\times \sum ...

  2. centOS取消锁屏

    自己在使用虚拟机运行centos 7时,centos 7默认几分钟不动就锁屏,实在很讨厌,所以在设置中将其去掉 1.左上角点击应用程序,在下面选择系统工具,在系统工具中选择设置 2.选择设置下面的隐私 ...

  3. SCOI2013 密码

    题目描述: Fish是一条生活在海里的鱼.有一天他很无聊,就到处去寻宝.他找到了位于海底深处的宫殿,但是一扇带有密码锁的大门却阻止了他的前进. 通过翻阅古籍,Fish 得知了这个密码的相关信息: 该密 ...

  4. mysql错误Error(1133): Can’t find any matching row in the use

    执行插入用户语句没有问题,但是执行权限赋值的时候提示:1133 - Can't find any matching row in the user table; 解决办法:插入新的用户成功时,需要刷新 ...

  5. html页面加载初始化方法

    js: 方法一: window.onload=function(){内容} 方法二(自己定义方法): function onload(){内容} onload(); jQuery: 方法一: $(do ...

  6. Python的发展与应用

    cpu 内存 硬盘 操作系统 ​ cpu:计算机的运算和计算中心,相当于人类大脑.飞机 ​ 内存:暂时存储数据,临时加载数据应用程序,4G,8G,16G,32G ​ 速度快,高铁,断电即消失.造价很高 ...

  7. Python爬虫例子(笔记,不适合参考,愿意看的可以看看)

    话不多说,直接上代码: import re import csv #爬虫的一个小例子,爬的是百度贴吧(网页版)某个帖子的各个楼层的用户名,发言内容和发言时间(使用到了正则表达式) source3.tx ...

  8. 九度oj 题目1063:整数和

    题目1063:整数和 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4043 解决:2638 题目描述: 编写程序,读入一个整数N.若N为非负数,则计算N到2N之间的整数和:若N为一个负数 ...

  9. parse XML & JSON & js

    parse XML & JSON & js how to parse xml data into json in js? https://stackoverflow.com/quest ...

  10. HDU 4941

    Magical Forest Problem Description There is a forest can be seen as N * M grid. In this forest, ther ...