<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          CSS3 transform詳解,關于如何使用transform

          時間:?2017-11-01閱讀:?5414標簽:?css3

          transform是css3的新特性之一。有了它可以box module變的更真實,這篇文章將全面介紹關于transform的使用。

          transform的作用 

          transform可以讓元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。  這些屬性定義上都從屬于transform,因此把它們直接作為transform的value來表達。

          transform的兼容寫法

          當然使用css3的實現一般都不會兼容低版面的IE,這里整理其他瀏覽器的兼容寫法如下:

          div
          {
          transform:rotate(7deg);
          -ms-transform:rotate(7deg); 	/* IE 9 */
          -moz-transform:rotate(7deg); 	/* Firefox */
          -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
          -o-transform:rotate(7deg); 	/* Opera */
          }

          說明:Internet Explorer 9 支持替代的 -ms-transform 屬性(僅適用于 2D 轉換)。Safari 和 Chrome 支持替代的 -webkit-transform 屬性(3D 和 2D 轉換)。Opera 只支持 2D 轉換。

          transform語法

          transform: none|transform-functions;

          none:表示不進么變換;表示一個或多個變換函數,以空格分開;換句話說就是我們同時對一個元素進行transform的多種屬性操作,例如rotate、scale、translate三種,但這里需要提醒大家的,以往我們疊加效果都是用逗號(“,”)隔開,但transform中使用多個屬性時卻需要有空格隔開。大家記住了是空格隔開。

          transform-functions取值:transform屬性實現了一些可用SVG實現的同樣的功能。它可用于內聯(inline)元素和塊級(block)元素。它允許我們旋轉、縮放和移動元素,他有幾個屬性值參數:rotate;translate;scale;skew;matrix。

          transform常用屬性

          transform:rotate():

          旋轉; 單位deg,設置的值為正數表示順時針旋轉,如果設置的值為負數,則表示逆時針旋轉。

          transform:translate():

          移動/位移;向右向上為整數,向左向下位移則為負“-”。

          translate(x,y)水平方向和垂直方向同時移動(也就是X軸和Y軸同時移動);translateX(x)僅水平方向移動(X軸移動);translateY(Y)僅垂直方向移動(Y軸移動)。

          transform:scale():

          比例;比例放大用整數,縮小則為負“-”。

          scale(X,Y)是用于對元素進行縮放,可以通過transform-origin對元素的基點進行設置,同樣基點在元素中心位置;基中X表示水平方向縮放的倍數,Y表示垂直方向的縮放倍數,而Y是一個可選參數,如果沒有設置Y值,則表示X,Y兩個方向的縮放倍數是一樣的。并以X為準。  

          scaleX() : 使用 [sx,1] 縮放矢量執行縮放操作,sx為所需參數。scaleX表示元素只在X軸(水平方向)縮放元素,他的默認值是(1,1)。

          scaleY() : 使用 [1,sy] 縮放矢量執行縮放操作,sy為所需參數。scaleY表示元素只在Y軸(垂直方向)縮放元素。

          transform:skew():

          傾斜/扭曲;參數表示傾斜角度,單位deg。

          skew(x,y)使元素在水平和垂直方向同時扭曲(X軸和Y軸同時按一定的角度值進行扭曲變形);

          skewX(x)僅使元素在水平方向扭曲變形(X軸扭曲變形);

          skewY(y)僅使元素在垂直方向扭曲變形(Y軸扭曲變形);

          transform:matrix

          矩陣:matrix以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換,相當于直接應用一個[a b c d e f]變換矩陣。就是基于水平方向(X軸)和垂直方向(Y軸)重新定位元素,此屬性值使用涉及到數學中的矩陣。這里推薦大家去看

          js對transform的取值和賦值

          賦值如下:

          element.style.webkitTransform = "";
          element.style.webkitTransform = "";
          element.style.MozTransform = "";
          element.style.msTransform = "";
          element.style.OTransform = "";
          element.style.transform = "";

          取值通過:

          if(element.currentStyle){
          	return element.currentStyle['transform'];
          }else{
          	return getComputedStyle(element,null)['transform'];
          }

          當然transform的屬性還對應3D的,這塊平時我們使用的比較少,這里就沒做具體的介紹了,大家有詳情可以去深入研究。




          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/40

          理解 CSS3中 object-fit

          在檢查網站的時候發現圖片給于固定寬的時候,會壓縮變形,要保證,img元素不變形,寬高比不變。從別人那里了解到object-fit,以前從未用過,所以就總結給自己看看,理解一下。

          css3常用動效以及總結

          box-shadow:盒子陰影,可以給卡片添加提高美化效果。可廣泛應用于內容展示頁面。css3 過渡:最簡單的過渡是一個div,給它加上如下代碼,便可以從寬度100px華麗的過渡到寬度為300px。

          css3新特性總結

          css3新特性總結:圓角邊框、多背景圖、顏色和透明度(由原來的rgb到現在的rgba)、多列布局和彈性盒模型、盒子的變幻(2D、3D)、過渡和動畫、引入web字體(在服務器端存儲)、媒體查詢、陰影

          用CSS3實現無限循環的無縫滾動

          使在頁面中循環展示信息的功能之前一般是用js來實現的,那么用CSS3該如何實現實現呢;使用CSS來進行動畫的展示,會讓頁面顯得更加流暢。如果能用CSS實現,可以嘗試盡量用CSS實現下

          css3中計數器的使用

          css3里有個很強大的功能,就是計算器,使用它可以很方便對頁面中的任意元素進行計數,實現類似于有序列表的功能。與有序列表相比,突出特性在于可以對任意元素計數,同時實現個性化計數。

          css3特效_CSS3彈跳Loading加載動畫特效的實現

          今天給大家分享一款非常常用的css 加載動畫,這款CSS3 Loading動畫主要由幾個小球通過規律的上下跳動,漸隱漸顯而成,效果十分不錯。尤其在移動端中使用,基本代替了圖片來實現加載的效果。

          CSS3中一些鮮為人知的屬性

          CSS3是CSS(層疊樣式表)技術的升級版本,CSS3規范里的元素能以不同速度向前發展,因為不同的瀏覽器廠商只支持給定特性。這篇文章主要整理一些關于css3中的鮮為人知的屬性

          CSS3 動畫性能優化

          CSS3 動畫給 Web 的用戶體驗帶來了巨大提升,本文將嘗試從瀏覽器渲染的角度,來解析動畫優化的原理及其技巧。為大家提供一些動畫性能優化的參考。

          css3實現背景圖片顏色修改的多種方式

          css3可以改變圖片的顏色了。從此再也不用設計出多張圖,而且隨時可以修改。下面就簡單介紹下css3中是如何做到改變背景圖片的顏色效果的。

          純css3實現餅狀圖

          網頁中,有時候會碰到餅狀圖的需求,比如統計圖表,進度指示器,定時器等,實現方式也是各種各樣,現在也有不少現成的js庫,可以直接拿來使用,方便很多。這里筆者為大家演示一種純css實現餅狀圖效果的方法。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网