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= ...
随机推荐
- tabindex属性
1. tabindex的用法: 可以设置tab键在控件中的移动顺序. 以下元素支持tabindex属性:<a> <input> <textarea> <are ...
- CodeForces 747D Winter Is Coming
贪心. 只考虑负数的位置,先填间隔较小的,再填间隔较大的.如果填不满就不填,如果有多余就留给最后一个负数到终点这段路. #include<cstdio> #include<cstri ...
- Git学习笔记(一)创建版本库并添加文件
最近从廖雪峰老师的个人网站上学习git,做点笔记. ★★★★★ 先注册自己的username和email,否则会报如下错误: 注册:git config --global user.name &quo ...
- java基础练习 9
import java.util.Scanner; public class Ninth { /*取一个整数a从右端开始的4-7位.*/ public static void main(String[ ...
- [前端性能提升]--图片转化为base64
图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址 意义:网页上的每一个图片,都是需要消耗一个 http 请求下载而来的(所有才有了 csssprites 技术 ...
- nohup及/dev/null使用
1.nohup ----后台执行,执行记录默认输出到当前目录下的nohup.out文件 nohup find /etc -name passwd 2./dev/null介绍 把/ ...
- windows 上搭建 sftp 服务器 --freesshd
Linux 下 sftp 默认都会安装的, Windows 就没有了.网上搜的资料发现比较好用的是 freesshd,免费版中最好用的. 1,下载:http://www.freesshd.com/?c ...
- iOS Size Class使用
iOS8和iPhone6发布已经过去蛮久了,广大的果粉终于迎来了大屏iPhone,再也不用纠结为大屏买三星舍苹果了-但是对于iOS开发人员来说,迎来了和Android开发开发一样的问题->各种屏 ...
- linux/windows平台生成随机数的不同方法
linux平台,使用rand.Seed() //rand_linux.go package main import ( "math/rand" "time" ) ...
- cshtml一二
布局页:_MyLayout.cshtml <!DOCTYPE html> @*Razor布局页*@ <html> <head> @*HTTP的头部协议,提示浏览器网 ...