CSS3的翻转效果
css3图片与文字3D transform切换:
http://www.w3cplus.com/demo/419.html
详细的CSS3属性详解:
http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
总结如下:
1、需要使用到的CSS3属性
透视和视角:perspective:8000px; -------------放在舞台上(.box)
需要用到transform的3D变换,即:transform-style:preserve-3d;-------------------------放在容器上(.inner)
translateZ,Z坐标移动,这个需要与perspective搭配使用,transform:translateZ(150px) 里面的数值为舞台高度的一半
rotateX,X方向旋转----------------------刚开始去.r2进行旋转-90度使其看不见,rotate(-90deg)
html布局:
<div class="box">
<div class="inner">
<div class="r1">1</div>
<div class="r2">2</div>
</div>
</div>
CSS:
/*舞台*/
.box {
width: 500px;
height: 300px;
position: relative;
-webkit-perspective:8000px; //透视和视角
}
/*容器*/
.inner {
width: 100%;
height: 100%;
-webkit-transform-style:preserve-3d; //3d变换
transition:.6s;
}
/*内容*/
.r1 {
position: absolute;
width: 100%;
height: 100%;
background: red;
outline:5px solid #000;
-webkit-transform:translateZ(150px); // 里面的数值 = 舞台高度的一半
}
.r2 {
position: absolute;
width: 100%;
height: 100%;
background: yellow;
outline: 5px solid blue;
-webkit-transform:rotateX(-90deg) translateZ(150px); //里面的数值 = 舞台高度的一半,刚开始通过rotateX(-90deg)隐藏在下方
}
/*交互*/
.inner:hover {
-webkit-transform: rotateX(90deg); //让r2出现
}
如果需要左右翻转,只需要更改rotateX为rotateY,translateZ(宽度的一半)
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
另一种翻转效果,结构不变,样式如下:
.box {
width: 300px;
height: 300px;
-webkit-perspective:8000px; /*设置舞台:透视和视角*/
position: relative;
}
.inner {
width: 100%;
height: 100%;
-webkit-transform-style:perserve-3d; /*设置场景:3d变换*/ }
.inner div{
position: absolute; /*绝对定位:使正面和反面全部重合*/
top:;
left:;
width: 100%;
height: 100%;
border-radius:50%;
text-align: center;
line-height: 300px;
-webkit-backface-visibility:hidden; /*背面隐藏*/
}
.r1 {
background: red;
-webkit-transition:1.5s; /*设置动画*/
}
.r2 {
background: yellow;
-webkit-transform:rotateY(180deg); /*刚开始,背面隐藏*/
-webkit-transition:1.5s; }
.inner:hover .r1{
-webkit-transform:rotateY(180deg); /*翻转后,正面隐藏,反面出现*/ }
.inner:hover .r2 {
-webkit-transform:rotateY(0deg); }
原理:
1、设置舞台和场景
2、使用绝对定位使正面和反面的div重合,让正面和反面的背面都隐藏,即:backface-visibility:hidden
3、让反面的旋转180deg先隐藏掉,当hover时,正面隐藏(旋转180deg),反面出现(旋转到0)
CSS3的翻转效果的更多相关文章
- css3 3d翻转效果
<div class="demo"> <span class="front"> aaaaaaaaaaa ...
- css3实现色子自动翻转效果
原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...
- 简单几步用纯CSS3实现3D翻转效果
作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...
- 使用JS与CSS3的翻转实现3D翻牌效果
之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果. 这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角, ...
- flip 翻转效果 css3实现
1.实现代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...
- css3 利用perspective实现翻页效果和正方体 以及翻转效果
要点: 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素 ...
- css3实现3D立体翻转效果
1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...
- CSS3实现翻转菜单效果
演示地址 点击打开链接 注意:菜单翻转效果在搜狗浏览器上看不出来.推荐用FireFox <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- css3图片3D翻转效果
点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...
随机推荐
- sublime text3 3103 激活码
—– BEGIN LICENSE —–Michael BarnesSingle User LicenseEA7E-8213858A353C41 872A0D5C DF9B2950 AFF6F667C4 ...
- 如何使用jQuery动态的在body里添加script标签?
var script = document.createElement('script'); script.type = 'text/jacascript'; script.src = 'url'; ...
- [SQL基础教程] 4-2 数据删除(DELETE)
[SQL基础教程] C4 数据更新 4-2 数据删除(DELETE) DROP TABLE / DELETE DROP TABLE - 完全删除表 DELETE - 仅删除数据,保留表容器 DELET ...
- GroupingView点击分组标题不展开,或点击标题部分文字不展开
GroupingView结构: 分组标题groupTextTpl是用两个DIV 来进行修饰的,在mouseDown时,EXT会查找css class=".x-grid-group-hd ...
- 基于Unity的Profiler性能分析
A. WaitForTargetFPS: Vsync(垂直同步)功能所,即显示当前帧的CPU等待时间 B. Overhead: Profiler总体时间-所有单项的记录时 ...
- 文档在线预览开源实现方案二:OpenOffice + pdf.js
文档在线预览的另一种实现方式采用的技术栈是OpenOffice + pdf.js, office文档转换为pdf的工作依然由OpenOffice的服务来完成,pdf生成后我们不再将其转换为其他文件而是 ...
- 原图旋转/缩放 然后画布画图 ImageProcessor
//旋转 byte[] photoBytes = File.ReadAllBytes(HttpContext.Current.Server.MapPath(diyInfo.ImageUrl)); Im ...
- [MFC美化] SkinMagic使用详解2- SkinMagic常用函数介绍
SkinMagic常用函数介绍 (1)InitSkinMagicLib函数:初始化SkinMagic int InitSkinMagicLib( //初始化SkinMagic工具库 HINSTANCE ...
- javascript入门基础知识
JavaScript介绍: 1. javascrip是互联网上最流行的脚本语言,可用于Web和HTML,更可广泛用于服务器.pc端.移动端. 2. javascript脚本语言: javascript ...
- CentOS6.5部署L2TP over IPSec
一.环境介绍: 1.CentOS 6.5 (要求双网卡做软路由,如果只是做VPN可以单网卡) a.外网IP: b.内网IP: 2.Window 10 主机一台做为一台内网测试软路由使用: a.内网IP ...