|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
标准的选择器不能格式化一个元素内容的第一个字母或者第一行,而伪元素选择器能实现
网页制造poluoluo文章简介:今朝制造出来的效果,只要Firefox3.5,Safari3.2+,GoogleChorme撑持。上面来为人人枚举出相干演示和代码。
无需JavaScript,imagery,canvas大概SVG,就能够使用最新的CSS制造出3D立方体,这切实其实是一件让人不可思议的事变。
今朝制造出来的效果,只要Firefox3.5,Safari3.2+,GoogleChorme撑持。上面来为人人枚举出相干演示和代码。
3DCSS
了局演示
单个静态3D立方体
撑持扫瞄器:Safari3.2+,GoogleChrome,Firefox3.5+
三个滑动的静态3D立方体
撑持扫瞄器:Safari4+,GoogleChrome
怎样制造?
实在利用DIV容器的代码很复杂,以下:
<divclass="cube">
<divclass="topFace">
<div>Content</div>
</div>
<divclass="leftFace">Content</div>
<divclass="rightFace">Content</div>
</div>
CSS来把持
.cube{
position:relative;
top:200px;
}
.rightFace,
.leftFace,
.topFacediv{
padding:10px;
width:180px;
height:180px;
}
.rightFace,
.leftFace,
.topFace{
position:absolute;
}
.leftFace{
-webkit-transform:skewY(30deg);
-moz-transform:skewY(30deg);
background-color:#ccc;
}
.rightFace{
-webkit-transform:skewY(-30deg);
-moz-transform:skewY(-30deg);
background-color:#ddd;
left:200px;
}
.topFacediv{
-webkit-transform:skewY(-30deg)scaleY(1.16);
-moz-transform:skewY(-30deg)scaleY(1.16);
background-color:#eee;
font-size:0.862em;
}
.topFace{
-webkit-transform:rotate(60deg);
-moz-transform:rotate(60deg);
top:-158px;
left:100px;
}
强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了。 |
|