css3 3d翻转效果
<div class="demo">
<span class="front">
aaaaaaaaaaaaaa
</span>
<span class="behind">
bbbbbbb
</span>
</div>
.demo{
display: block;
cursor: pointer;
position: relative;
width:190px;/*限定3d展示范围*/
height: 243px;
/*-webkit-perspective: 200px;*/
border: 1px solid #f00;
}
.demo span{
display: block;
/*指定该元素的具有3d翻转效果*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
/*指定元素3d反面是否可见*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.demo .front{
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.demo .front.hover{
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.demo .behind{
/*默认该层就是反面,并且不可见*/
position: absolute;left: 0;top: 0;
display: table;
cursor: text;
width: 100%;
height: 100%;
background: #00a3cf;
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
display: none\9;
}
.demo .behind.hover{
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
css3 3d翻转效果的更多相关文章
- 简单几步用纯CSS3实现3D翻转效果
作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...
- CSS3—3D翻转
本案例主要是css3和html5,不会js也可以做动画◕.◕ 一.首先看下主要需要的样式: perspective transform transition position classList 就这 ...
- CSS3之图片3D翻转效果(网页效果--每日一更)
今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...
- css3图片3D翻转效果
点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...
- CSS3的翻转效果
css3图片与文字3D transform切换: http://www.w3cplus.com/demo/419.html 详细的CSS3属性详解: http://www.zhangxinxu.com ...
- CSS3 3D立方体效果-transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- CSS3——3D翻转相册
transform属性和transition过渡属性,结合jQuery代码实现翻转功能. <!DOCTYPE html> <html lang="en"> ...
- 初识css3 3d动画效果
(先看我博客右上角的3d盒子动画效果,目前没做兼容处理,最好最新的chrome看)无意间看到网上css3写的3d动画效果,实在炫酷,以前理解为需要js去计算去写,没想到css直接可以实现.于是开始研究 ...
- css3 3D盒子效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 算法题目-记hulu失败的实习面试
1.对于数组A[0,1,2,3,4,...,k],求得0<=i < j < k,且使得A[j] - A[i]为最大值. 最简单也最容易想到的搜索两遍,即可得到答案.i的位置从起始至倒 ...
- tornado 数据库操作
tornado是python的web框架,web程序开发中数据库操作是必须的. 安装: tornado的官方文档中提供的说明比较少,而且提供的模块中未找到数据库方面的模块,难道没有针对数据库操作进行封 ...
- Druid的Segment Balance及其代价计算函数分析
Balance $Cost(X, Y) $ $$ J_\alpha(x) = \sum_{m=0}^\infty \frac{(-1)^m}{m! \Gamma (m + \alpha + 1)} { ...
- vue 报错./lib/html5-entities.js this relative module was not
原文参考http://www.bozhiyue.com/web/yuyan/2017/0501/1236324.html 然后就把他俩注视了,是不报错了,但是也没有运行不出来: 居然是因为早上我360 ...
- jquery 1.9 1.8 判断 浏览器(IE11,IE8,IE7,IE6)版本
1.9以后很我方法删除了,所有和之前版本判断浏览器版本有所差记录一下 1.9 ------------------------------------------------------------- ...
- hdu5692【dfs序】【线段树】
Snacks Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Sub ...
- POJ1797 Heavy Transpotation
Background Hugo Heavy is happy. After the breakdown of the Cargolifter project he can now expand bu ...
- POJ 3368 & UVA 11235 - Frequent values
题目链接:http://poj.org/problem?id=3368 RMQ应用题. 解题思路参考:http://blog.csdn.net/libin56842/article/details/4 ...
- kafka杂记
对kafka介绍全面的一个链接 [传送门]http://blog.csdn.net/lizhitao/article/details/39499283 http://blog.csdn.net/liz ...
- 眠眠interview Question
1. Wkwebkit在异步回调 如何像webview的回调 一样在主线程回调.可以使用runloop 解决么? dispatch get main queue http://www.jiansh ...