您当前位置：首页 > web前端 > htmlcss > CSS3转换功能transform主要属性值分析及实现

CSS3转换功能transform主要属性值分析及实现

来源：程序员人生发布时间：2013-11-13 13:17:12 阅读次数：3028次

css3的到来，让css技术进一步提高了，以前在css2不能实现的功能,现在都可以实现了，例如: 圆角，文字阴影，透明度，渐变，转换，过渡，动画等等。这些功能使用起来很方便。

今天我想介绍一下转换的用法：

transform主要包括以下属性值：

rotate(旋转度数)

scale(缩放)

skew(斜切扭曲)

translate(对象平移)

利用上述属性值，可以实现一些很酷的效果，比如正方体，下面是我做的一个效果，三个大小不等的正方体

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS3转换功能</title><script type="text/javascript" src="jquery-1.7.min.js"></script><style type="text/css">* {margin: 0;padding: 0;list-style: none;}body {padding-top: 100px;}.box {margin: 0 auto 0;width: 300px;height: 500px;position: relative;}.box .topBox {position: absolute;width: 300px;height: 150px;border: 1px solid #ccc;top: 0;left:107px;background-color: yellow;-moz-transform: skew(-55deg,0);-webkit-transform: skew(-55deg,0);-o-transform: skew(-55deg,0);font-size: 100px;text-align: center;}.box .topBox02{position: absolute;width: 300px;height: 260px;border: 1px solid #ccc;border-top: none;top: 152px;left: 0;background-color: green;}.box .topBox03{position: absolute;width: 214px;height: 260px;border: 1px solid #ccc;border-top: none;border-left: none;top: 76px;left: 302px;background-color: blue;-moz-transform: skew(0,-35deg);-webkit-transform: skew(0,-35deg);-o-transform: skew(0,-35deg);}.box .topBox04 {position: absolute;width: 300px;height: 150px;border: 1px solid #ccc;top: 260px;left:107px;-moz-transform: skew(-55deg,0);-webkit-transform: skew(-55deg,0);-o-transform: skew(-55deg,0);}.box02 {-moz-transform: scale(0.5,0.5) translate(455px,-838px);-webkit-transform: scale(0.5,0.5) translate(455px,-838px);-o-transform: scale(0.5,0.5) translate(455px,-838px);}.box03 {-moz-transform: scale(0.2,0.2) translate(1671px, -4354px);-webkit-transform: scale(0.2,0.2) translate(1671px, -4354px);-o-transform: scale(0.2,0.2) translate(1671px, -4354px);}.box .topBox05 {position: absolute;width: 300px;height: 260px;border-left: 1px solid #ccc;top: 0;left:214px;}</style></head><body><div class="box"><div class="topBox"></div><div class="topBox02"></div><div class="topBox03"></div><div class="topBox04"></div><div class="topBox05"></div></div><div class="box box02"><div class="topBox"></div><div class="topBox02"></div><div class="topBox03"></div><div class="topBox04"></div><div class="topBox05"></div></div><div class="box box03"><div class="topBox"></div><div class="topBox02"></div><div class="topBox03"></div><div class="topBox04"></div><div class="topBox05"></div></div></body></html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></div>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 关于MySQL中的InnoDB引擎的MVCC机制的理解

下一篇 如何运营地方门户分享六个策略指南

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点