您當(dāng)前位置：首頁 > web前端 > htmlcss > CSS3轉(zhuǎn)換功能transform主要屬性值分析及實(shí)現(xiàn)

CSS3轉(zhuǎn)換功能transform主要屬性值分析及實(shí)現(xiàn)

來源：程序員人生發(fā)布時間：2013-11-13 13:17:12 閱讀次數(shù)：3215次

css3的到來，讓css技術(shù)進(jìn)一步提高了，以前在css2不能實(shí)現(xiàn)的功能,現(xiàn)在都可以實(shí)現(xiàn)了，例如: 圓角，文字陰影，透明度，漸變，轉(zhuǎn)換，過渡，動畫等等。這些功能使用起來很方便。

今天我想介紹一下轉(zhuǎn)換的用法：

transform主要包括以下屬性值：

rotate(旋轉(zhuǎn)度數(shù))

scale(縮放)

skew(斜切扭曲)

translate(對象平移)

利用上述屬性值，可以實(shí)現(xiàn)一些很酷的效果，比如正方體，下面是我做的一個效果，三個大小不等的正方體

代碼如下：

<!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轉(zhuǎn)換功能</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刷新本頁，更多網(wǎng)頁代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></div>
提示：可修改后代碼再運(yùn)行!

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈
程序員人生

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

上一篇 關(guān)于MySQL中的InnoDB引擎的MVCC機(jī)制的理解

下一篇 如何運(yùn)營地方門戶分享六個策略指南

分享到:

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

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

CSS3轉(zhuǎn)換功能transform主要屬性值分析及實(shí)現(xiàn)