加载中…3D cubes
(2011-03-01 14:58:35)
标签：
方块3dcubeswebkitchrometransitiontransformit |
分类： CSS3 |
最近在玩HTML5+CSS3,看了网上一些效果后，自己模仿着写了点，感觉效果很棒《3D cubes》
原效果文章路径：http://www.paulrhayes.com/experiments/cube/multiCubes.html
下面是吖真的代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3d cubes</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
.wrap{ position:relative;}
.box{ margin:50px auto; width:400px; position:absolute; cursor:pointer;}
.box:hover div{ background:#ffffcc;}
.box .top:hover,.box .left:hover,.box .right:hover{ background:#ffffaa;}
.box div{ height:200px; width:200px;}
.box .top{ background:#eee; -webkit-transform: skew(-60deg,30deg) translate(50px,30px) scale(1,0.582); -webkit-transform-origin: 100% 100%; -moz-transform: skew(-60deg,30deg)
translate(50px,30px) scale(1,0.582); -moz-transform-origin: 100%
100%;}
.box .left{ background:#ccc; float:left; -moz-transform:skew(0deg,30deg); -webkit-transform:skew(0deg,30deg);}
.box .right{ background:#ddd; float:left; -moz-transform:skew(0deg,-30deg); -webkit-transform:skew(0deg,-30deg);}
.box1{ left:600px; top:100px; -webkit-transition:left .5s linear,top .5s linear;}
.box1:hover{ left:800px; top:215px; -webkit-transition:left .8s linear .5s,top .8s linear .5s;}
.box2{ left:400px; top:215px; -webkit-transition:left .5s linear,top .5s linear;}
.box2:hover{ left:600px; top:330px; -webkit-transition:left .8s linear .5s,top .8s linear .5s;}
</style>
</head>
<body>
<div class="wrap">
<div class="box box1"><div class="top">zhenTop</div><div class="left">zhenLeft</div><div class="right">zhenRight</div></div>
<div class="box box2"><div class="top">zhenTop</div><div class="left">zhenLeft</div><div class="right">zhenRight</div></div>
</div>
</body>
</html>
在firefox中查看能看到2个立方体，鼠标滑过时，方块会即刻移位；
在chrome等webkit内核浏览器查看时，鼠标滑过时，方块会延迟0.5秒再以动画形式移动，鼠标滑出区域时会无延迟缓慢回归原位；
原效果文章路径：http://www.paulrhayes.com/experiments/cube/multiCubes.html
下面是吖真的代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3d cubes</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
.wrap{ position:relative;}
.box{ margin:50px auto; width:400px; position:absolute; cursor:pointer;}
.box:hover div{ background:#ffffcc;}
.box .top:hover,.box .left:hover,.box .right:hover{ background:#ffffaa;}
.box div{ height:200px; width:200px;}
.box .top{ background:#eee; -webkit-transform: skew(-60deg,30deg) translate(50px,30px) scale(1,0.582); -webkit-transform-origin: 100% 100%;
.box .left{ background:#ccc; float:left; -moz-transform:skew(0deg,30deg); -webkit-transform:skew(0deg,30deg);}
.box .right{ background:#ddd; float:left; -moz-transform:skew(0deg,-30deg); -webkit-transform:skew(0deg,-30deg);}
.box1{ left:600px; top:100px; -webkit-transition:left .5s linear,top .5s linear;}
.box1:hover{ left:800px; top:215px; -webkit-transition:left .8s linear .5s,top .8s linear .5s;}
.box2{ left:400px; top:215px; -webkit-transition:left .5s linear,top .5s linear;}
.box2:hover{ left:600px; top:330px; -webkit-transition:left .8s linear .5s,top .8s linear .5s;}
</style>
</head>
<body>
<div class="wrap">
<div class="box box1"><div class="top">zhenTop</div><div class="left">zhenLeft</div><div class="right">zhenRight</div></div>
<div class="box box2"><div class="top">zhenTop</div><div class="left">zhenLeft</div><div class="right">zhenRight</div></div>
</div>
</body>
</html>
在firefox中查看能看到2个立方体，鼠标滑过时，方块会即刻移位；
在chrome等webkit内核浏览器查看时，鼠标滑过时，方块会延迟0.5秒再以动画形式移动，鼠标滑出区域时会无延迟缓慢回归原位；
喜欢
0
赠金笔