css3实现翻转效果,css3 实现3D翻转效果

css3 实现3D翻转效果。

HTML源码：

前面内容，鼠标移到这，试试

用户名
密码

css源码：

/* entire container, keeps perspective */

.flip-container {

perspective: 1000;

transform-style: preserve-3d;

}

/* UPDATED! flip the pane when hovered */

.flip-container:hover .back {

transform: rotateY(0deg);

}

.flip-container:hover .front {

transform: rotateY(180deg);

}

.flip-container, .front, .back {

width: 320px;

height: 200px;

}

/* flip speed goes here */

.flipper {

transition: 0.6s;

transform-style: preserve-3d;

position: relative;

}

/* hide back of pane during swap */

.front, .back {

backface-visibility: hidden;

transition: 0.6s;

transform-style: preserve-3d;

position: absolute;

top: 0;

left: 0;

}

/* UPDATED! front pane, placed above back */

.front {

z-index: 2;

transform: rotateY(0deg);

background:yellow;

}

/* back, initially hidden pane */

.back {

transform: rotateY(-180deg);

background:red;

}

Some vertical flip updates

.vertical.flip-container {

position: relative;

}

.vertical .back {

transform: rotateX(180deg);

}

.vertical.flip-container:hover .back {

transform: rotateX(0deg);

}

.vertical.flip-container:hover .front {

transform: rotateX(180deg);

}

css3实现翻转效果,css3 实现3D翻转效果相关推荐

HTML5 CSS3 专题：诱人的实例 3D旋转木马效果相冊
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果
首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果.就是鼠标移到元素上,感觉能够看到元素背后的信息. 大家假设制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语, ...
HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果以及图片提交
今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放在使用该实例制作的相册之后都可以 ...
html3d上下翻转4面效果,纯CSS 3D翻转一个面（翻转导航菜单立方体）
在做练习的时候学到css的翻转导航菜单,原代码有点让人头疼,通过对其css的参数一点点研究了其实现过程. 这里推荐大家研究这个3D翻转动画的代码. 一首先要知道坐标系的设定如下: 其次翻转关键的参数 ...
html5立体照片墙效果,js实现3D照片墙效果
聊一下心得:CSS写得好,真的可以省很多js代码哈,写起来也简单很多,所以要好好掌握js哈,所以这里也提供了css代码,如果您觉得您的css写得不错,可以直接看js代码哦效果: 1.点击Start ...
ios 添加浮动效果_IOS 实现3D 浮动效果动画
涉及到的技术点 catransform3drotate 转换坐标系整体视图的层级结构 tvoscardview cardimageview cardparallaxview 转换坐标系的代码 cgf ...
html5 相册翻转效果,HTML5 css3：3D旋转木马效果相册
这篇博客的目的是因为上篇HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tranlateY 效果 ...
HTML5 CSS3 专题诱人的实例 3D旋转木马效果相册
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
html文字翻牌效果,css3翻牌效果
原理:通过css3属性-webkit-transform: rotate(0deg)与-webkit-transform: rotate(180deg)对2个元素设置正反面然后通过有过渡(trans ...
html3d旋转效果相册,HTML5css3：3D旋转木马效果相册
这篇博客的目的是因为上篇HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tranlateY 效果 ...

css3实现翻转效果,css3 实现3D翻转效果

css3实现翻转效果,css3 实现3D翻转效果相关推荐

最新文章

热门文章