您當前位置：首頁 > web前端 > htmlcss > CSS3轉換功能transform主要屬性值分析及實現

CSS3轉換功能transform主要屬性值分析及實現

來源：程序員人生發布時間：2013-11-13 13:17:12 閱讀次數：3205次

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.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></div>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 關于MySQL中的InnoDB引擎的MVCC機制的理解

下一篇 如何運營地方門戶分享六個策略指南

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

CSS3轉換功能transform主要屬性值分析及實現