CSS3——3D效果
1.效果1
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:100px;height:100px;padding:100px;border:5px solid #;margin:30px auto; -webkit-transform-style:preserve-3d;-webkit-perspective:100px;}
.div{width:100px;height:100px;background:Red; transition:1s;}
.box:hover .div{-webkit-transform:rotateX(180deg);}
</style>
</head>
<body>
<div class="box">
<div class="div"></div>
</div>
</body>
</html>
2.效果2
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:100px;height:100px;padding:100px;border:5px solid #;margin:30px auto; -webkit-transform-style:preserve-3d;-webkit-perspective:100px;}
.div{width:100px;height:100px;background:Red; transition:1s;}
.box:hover .div{-webkit-transform:rotateY(180deg);}
</style>
</head>
<body>
<div class="box">
<div class="div"></div>
</div>
</body>
</html>
3.效果3
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:100px;height:100px;padding:100px;border:5px solid #;margin:30px auto; -webkit-transform-style:preserve-3d;-webkit-perspective:200px;}
.div{width:100px;height:100px;background:Red; transition:1s;}
.box:hover .div{-webkit-transform:translateZ(-100px);}
</style>
</head>
<body>
<div class="box">
<div class="div"></div>
</div>
</body>
</html>
4.效果4
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.wrap{width:100px;height:100px;padding:100px; border:5px solid #; margin:100px auto; -webkit-perspective:200px; -webkit-transform:scale();}
.box{width:100px;height:100px;background:red; position:relative; -webkit-transform-style:preserve-3d; transition:2s; -webkit-transform-origin:center center -50px;}
.box div{width:100px;height:100px; position:absolute; color:#fff;font-size:50px; text-align:center;line-height:100px;}
.box div:nth-of-type(){left:;top:-100px;background:#9C0; -webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg);}
.box div:nth-of-type(){left:-100px;top:0px;background:#CF3; -webkit-transform-origin:right; -webkit-transform:rotateY(-90deg);}
.box div:nth-of-type(){left:0px;top:0px;background:#CCF;}
.box div:nth-of-type(){left:100px;top:;background:#0C9;-webkit-transform-origin:left;-webkit-transform:rotateY(90deg);}
.box div:nth-of-type(){left:0px;top:100px;background:#69C;-webkit-transform-origin:top;-webkit-transform:rotateX(-90deg);}
.box div:nth-of-type(){left:;top:;background:#F0C;-webkit-transform:translateZ(-100px) rotateX(180deg);}
.wrap:hover .box{ -webkit-transform:rotateX(180deg);}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
幻灯片效果
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style id="css">
body,ul,ol{margin:;padding:;}
li{ list-style:none;}
.wrap{width:800px;margin:100px auto ;}
#picList{width:800px;height:360px; -webkit-perspective:800px; }
#picList li{width:50px;height:360px; position:relative; -webkit-transform-style:preserve-3d; -webkit-transform-origin:center center -180px;float:left;}
#picList a{width:%;height:%; position:absolute;left:;top:;}
#picList li a:nth-of-type(){ background:url(3d幻灯片/.jpg) no-repeat; }
#picList li a:nth-of-type(){ background:url(3d幻灯片/.jpg) no-repeat; top:-360px; -webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg)}
#picList li a:nth-of-type(){ background:url(3d幻灯片/.jpg) no-repeat; -webkit-transform:translateZ(-360px) rotateX(180deg);}
#picList li a:nth-of-type(){ background:url(3d幻灯片/.jpg) no-repeat; -webkit-transform-origin:top; -webkit-transform:rotateX(-90deg); top:360px;}
#picList li span{ position:absolute;width:360px;height:360px;background:#;}
#picList li span:nth-of-type(){ -webkit-transform-origin:left; -webkit-transform:rotateY(90deg);left:;}
#picList li span:nth-of-type(){ -webkit-transform-origin:right; -webkit-transform:rotateY(-90deg);right:;} #btns{float:right; padding:10px ;}
#btns li{width:40px;height:40px;background:#;color:#fff; border-radius:%; font:italic 30px/40px Arial;float:left;margin: 5px; text-align:center; cursor:pointer;}
#btns .active{ background:#f60;} </style>
<script>
window.onload=function()
{
var oPicList=document.getElementById("picList");
var oCss=document.getElementById("css");
var aBtns=document.getElementById("btns").getElementsByTagName("li");
var aLi=null;
var sLi="";
var sCss="";
var iLiw=;
var iZindex=;
var iNow=;
var iLength=oPicList.clientWidth/iLiw;
for(var i=;i<iLength;i++)
{
i>iLength/?iZindex--:iZindex++;
sLi+='<li><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><span></span><span></span></li>';
sCss+="#picList li:nth-of-type("+(i+)+") a{ background-position:-"+i*iLiw+"px 0;}";
sCss+="#picList li:nth-of-type("+(i+)+"){z-index:"+iZindex+"}"; }
oPicList.innerHTML=sLi;
oCss.innerHTML+=sCss;
aLi=oPicList.children;
for(var i=;i<aBtns.length;i++)
{
(function(a){
aBtns[a].onclick=function()
{
for(var i=;i<aLi.length;i++)
{
aLi[i].style.transition="0.5s "+i*+"ms";
aLi[i].style.WebkitTransform="rotateX(-"+a*+"deg)";
}
this.className="active";
aBtns[iNow].className="";
iNow=a;
};
})(i)
}
};
</script>
</head>
<body>
<div class="wrap">
<ul id="picList"> </ul>
<ol id="btns">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
@-webkit-keyframes move
{
%
{
width:1000px;
}
}
@-moz-keyframes move
{
%
{
width:1000px;
}
}
@keyframes move
{
%
{
width:1000px;
}
}
.box{width:100px;height:100px;background:red; -webkit-animation:2s move;
-moz-animation:2s move;animation:2s move;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
@-webkit-keyframes move
{
%{
left:;
}
%
{
left:-500px;
}
}
#wrap{ width:500px;height:100px;border:1px solid #; position:relative;margin:100px auto; overflow:hidden;}
#list{ position:absolute;left:;top:;margin:;padding:; -webkit-animation:3s move infinite linear; width:%;}
#list li{ list-style:none;width:98px;height:98px;border:1px solid #fff;background:#; color:#fff; font:50px/98px Arial; text-align:center; float:left;}
#wrap:hover #list{ -webkit-animation-play-state:paused;}
</style>
</head>
<body>
<div id="wrap">
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
@-webkit-keyframes domove
{
%
{
top:;left:;
}
%
{
top:;left:300px;
}
%
{
top:300px;left:300px;
}
%
{
top:300px;left:0px;
}
%
{
top:;left:;
}
}
#wrap{width:400px;height:400px;border:1px solid #; position:relative; border:5px solid #;}
.box{width:100px;height:100px;background:red; position:absolute;left:;top:; -webkit-animation:4s domove infinite linear alternate;}
</style>
</head>
<body>
<div id="wrap">
<div class="box"></div>
</div>
</body>
</html>
折纸布局
'
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#wrap{ width:500px;margin: auto; -webkit-perspective:800px; -webkit-transform-style:preserve-3d;}
#wrap div{ height:100px;border:1px solid #;background:#ccc;}
#wrap div:nth-of-type(){ -webkit-transform-origin:bottom; -webkit-transform:rotateX(45deg);}
#wrap div:nth-of-type(){ -webkit-transform-origin:top; -webkit-transform:rotateX(-45deg);}
#wrap div:nth-of-type(){ -webkit-transform-origin:top; -webkit-transform:rotateX(45deg);}
</style>
</head>
<body>
<div id="wrap">
<div></div>
<div></div>
<div style="height:auto;">
<div></div>
</div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#wrap{ width:500px;margin: auto; -webkit-perspective:800px; -webkit-transform-style:preserve-3d; position:relative;}
#wrap div{position:absolute;top:102px;left:;width:500px; -webkit-transform-origin:top;-webkit-transform-style:preserve-3d;}
#wrap span{height:100px;border:1px solid #;background:#ccc; display:block;}
#wrap>div:nth-of-type(){top:;}
</style>
</head>
<body>
<div id="wrap">
<div style="-webkit-transform:rotateX(-45deg);">
<span></span>
<div style="-webkit-transform:rotateX(90deg);">
<span></span>
<div style="-webkit-transform:rotateX(-90deg);">
<span></span>
<div style="-webkit-transform:rotateX(90deg);">
<span></span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
@-webkit-keyframes open
{
%
{
-webkit-transform:rotateX(-120deg);
}
%
{
-webkit-transform:rotateX(30deg);
}
%
{
-webkit-transform:rotateX(-15deg);
}
%
{
-webkit-transform:rotateX(8deg);
}
%
{
-webkit-transform:rotateX(0deg);
}
}
@-webkit-keyframes clos
{
%
{
-webkit-transform:rotateX(0deg);
}
%
{
-webkit-transform:rotateX(-120deg);
}
}
body{margin:;}
#wrap{ width:160px;margin:30px auto; position:relative; -webkit-perspective:800px;}
#wrap h2{ height:40px;background:#F60; color:#fff; font: bold 16px/40px "微软雅黑"; text-align:center;margin:; position:relative;z-index:;}
#wrap div{ position:absolute;top:32px; width:%;left:; -webkit-transform-style:preserve-3d; -webkit-transform-origin:top;-webkit-transform:rotateX(-120deg);}
#wrap span{ display:block;height:30px;background:#9F0; font:12px/30px "宋体"; color:#fff; text-indent:20px; box-shadow:inset 20px rgba(,,,); transition:1s;}
#wrap>div{top:40px;}
#wrap .show{-webkit-animation:2s open;-webkit-transform:rotateX(0deg);}
#wrap .hide{-webkit-animation:.8s clos;-webkit-transform:rotateX(-120deg);}
#wrap .show>span{ box-shadow:inset 20px rgba(,,,);}
#btn{ position:absolute;}
</style>
</head>
<body>
<input type="button" value="按钮" id="btn" />
<div id="wrap">
<h2>我是标题奥</h2>
<div>
<span>选项1</span>
<div>
<span>选项2</span>
<div>
<span>选项3</span>
<div>
<span>选项4</span>
<div>
<span>选项5</span>
<div>
<span>选项6</span>
<div style="">
<span>选项7</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var oBtn=document.getElementById("btn");
var oWrap=document.getElementById("wrap");
var aDiv=oWrap.getElementsByTagName("div");
var iDelay=;
var oTimer=null;
var i=;
var bOff=true;
oBtn.onclick=function()
{
if(oTimer)
{
return;
}
if(bOff)
{
i=;
oTimer=setInterval(function(){
aDiv[i].className="show";
i++;
if(i==aDiv.length)
{
clearInterval(oTimer);
oTimer=null;
bOff=false;
}
},iDelay);
}
else
{
i=aDiv.length-;
oTimer=setInterval(function(){
aDiv[i].className="hide";
i--;
if(i<)
{
clearInterval(oTimer);
bOff=true;
oTimer=null;
}
},iDelay);
}
};
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
@-webkit-keyframes open{
%
{
-webkit-transform:rotateX(-120deg);
}
%
{
-webkit-transform:rotateX(30deg);
}
%
{
-webkit-transform:rotateX(-15deg);
}
%
{
-webkit-transform:rotateX(8deg);
box-shadow:inset #ccc;
}
%
{
-webkit-transform:rotateX(0deg);
}
}
@-webkit-keyframes clos
{
%
{
-webkit-transform:rotateX(0deg);
}
%
{
-webkit-transform:rotateX(-120deg);
}
}
.wrap{width:240px; position:relative; -webkit-perspective:800px; margin: auto;}
.wrap h3{ margin:;height:40px;background:#f60; color:#fff; line-height:40px; text-align:center; font-size:16px; position:relative; z-index:;}
.wrap div{ position:absolute;top:30px;left:; -webkit-transform-style:preserve-3d; width:%; -webkit-transform-origin:top; -webkit-transform:rotateX(-120deg); z-index:;}
.wrap>div:nth-of-type(){top:40px;}
.wrap span{ display:block;height:28px;background:#CF3; color:#fff; font:14px/28px "宋体"; text-indent:20px; box-shadow:inset 100px 20px rgba(,,,); transition:1s;}
.wrap .open{-webkit-transform:rotateX(0deg); -webkit-animation:.5s open ease-in;}
.wrap .open>span{box-shadow:inset 100px 20px rgba(,,,);}
.wrap .clos{-webkit-transform:rotateX(-120deg); -webkit-animation:.7s clos ease;}
.wrap .clos>span{box-shadow:inset 100px 20px rgba(,,,);}
#btn{ position:absolute;left:;top:; width:100px;height:30px; transition:1s;}
</style>
<script>
window.onload=function()
{
var oBtn=document.getElementById("btn");
var oWrap=document.getElementById("wrap");
var aDiv=oWrap.getElementsByTagName("div");
var i=;
var oTimer=null;
var iDelay=;
var Boff=true;
oBtn.onclick=function()
{
oBtn.style.left="-300px";
if(Boff)
{
i=;
oTimer=setInterval(function(){
aDiv[i].className="open";
if(i==aDiv.length-)
{
clearInterval(oTimer);
oBtn.style.left="0px";
oBtn.value="关闭";
}
i++;
},iDelay);
}
else
{
i=aDiv.length-;
oTimer=setInterval(function(){
aDiv[i].className="clos";
if(i==)
{
clearInterval(oTimer);
oBtn.style.left="0px";
oBtn.value="展开";
}
i--;
},);
}
Boff=!Boff;
}; };
</script>
</head>
<body>
<input type="button" value="展开" id="btn" />
<div class="wrap" id="wrap">
<h3>这是标题</h3>
<div>
<span>选项1</span>
<div>
<span>选项2</span>
<div>
<span>选项3</span>
<div>
<span>选项4</span>
<div>
<span>选项5</span>
<div>
<span>选项6</span>
<div>
<span>选项7</span>
<div>
<span>选项8</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS3——3D效果的更多相关文章
- css3 3D效果
css3 3D变形 transfrom初学 这个礼拜学了css3 3d,感觉到css无穷的魅力,可以通过几个特定的代码符号创建出3D效果的页面. ___ 透视 一个元素需要一个透视点才能激活3D空间, ...
- css3 3d效果及动画学习
css参考手册: http://www.phpstudy.net/css3/ http://www.css88.com/book/css/ 呈现3d效果:-webkit-transform-style ...
- 一篇文章搞定css3 3d效果
css3 3d学习心得 卡片反转 魔方 banner图 首先我们要学习好css3 3d一定要有一定的立体感 通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了. 首先先给大家看一个小例子: 卡 ...
- CSS3,3D效果轮播图
---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...
- 好吧，CSS3 3D transform变换，不过如此！
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
- css3 3D变形 入门（一）
css3 3D.html div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 ...
- css3 3d初入门（一）
css3 3D.html div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 ...
- CSS3 3D transform变换
.实际应用-图片的旋转木马效果 您可以狠狠地点击这里:图片的旋转木马效果demo 建议在足够新版本的FireFox浏览器或Safari浏览器下观看,Chrome可能需要居中定位查看,下图为效果缩略图: ...
- 好吧，CSS3 3D transform变换，不过如此！——张鑫旭
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
随机推荐
- cmd获取系统时间
查看时间格式: echo %date% echo %time% 通过%date:~5,2%来组合得出当前日期,组合的效果为yyyymmdd,date命令得到的日期格式默认为yyyy-mm-dd,通过% ...
- linux搭建mysql 5.6.28
1.下载rmp文件 http://dev.mysql.com/downloads/mysql/ 2.安装 rpm -ivh MySQL-server--.linux_glibc2..x86_64.rp ...
- O(N)时间的排序
题目:某公司有几万名员工,请完成一个时间复杂度为O(n)的算法对该公司员工的年龄作排序,可使用O(1)的辅助空间. 要注意分析题目,一般排序要么是O(n^2),要么是O(nlogn).但这里题目特别强 ...
- django中的站点管理
所谓网页开发是有趣的,管理界面是千篇一律的.所以就有了django自动管理界面来减少重复劳动. 一.激活管理界面 1.django.contrib包 django自带了很多优秀的附加组件,它们都存在于 ...
- NOIP2008提高组火柴棒等式（模拟）——yhx
题目描述 给你n根火柴棍,你可以拼出多少个形如“A+B=C”的等式?等式中的A.B.C是用火柴棍拼出的整数(若该数非零,则最高位不能是0).用火柴棍拼数字0-9的拼法如图所示: 注意: 加号与等号各自 ...
- python中thread模块中join函数
http://www.cnblogs.com/vingi/articles/2657790.html for i in range(10): t = ThreadTest(i) thread_arr. ...
- Codeforces Round #258 E Devu and Flowers --容斥原理
这题又是容斥原理,最近各种做容斥原理啊.当然,好像题解给的不是容斥原理的方法,而是用到Lucas定理好像.这里只讲容斥的做法. 题意:从n个容器中总共取s朵花出来,问有多少种情况.其中告诉你每个盒子中 ...
- Unity3D面试题汇总
1.请描述游戏动画有哪几种,以及其原理. 2.alpha blend 工作原理 3.写光照计算中的diffuse的计算公式 4.lod是什么,优缺点是什么 5.两种阴影判断的方法工作原理 6.MipM ...
- java 21 - 13 IO流之序列化和反序列化
序列化流:把对象按照流一样的方式存入文本文件或者在网络中传输.对象 -- 流数据(ObjectOutputStream) 构造方法:ObjectInputStream(InputStream in) ...
- （转） C#多线程赛跑实例
专于:http://blog.csdn.net/lidatgb/article/details/8363035 结合上篇<多线程的基础>,这次我们写一个多线程的赛跑实例,内容很简单:超人和 ...