這篇文章主要為大家展示了“Css中2d轉換怎么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Css中2d轉換怎么用”這篇文章吧。

我們提供的服務有：成都網(wǎng)站建設、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、江干ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的江干網(wǎng)站制作公司

css的2d轉換十分強大，能夠在不使用js的情況下，實現(xiàn)頁面的元素與用戶之間更多動態(tài)的交互，增強用戶體驗。其中使用最多的就是hover偽類。

1、創(chuàng)建一個頁面的div元素：

4、給第一個正方形加入鼠標點擊

.de:first-child:hover{ transform: translate(0px,-5px);transition: transform 1s; }

鼠標移動到正方形區(qū)域后，小方塊會向上移動5px，有過渡效果；離開小方塊后，立即回到原位，沒有過渡效果；

另外一種寫法：

.de:first-child{ transition: transform 1s; } .de:first-child:hover{ transform: translate(0px,-5px); }

將transition過渡效果寫在被選中的整個元素中，出現(xiàn)的效果

鼠標移動到正方形區(qū)域后，小方塊會向上移動5px，有過渡效果；離開小方塊后，小方塊會到原始位置，有過渡效果。

原理：將過渡效果transition寫在hover偽類中，鼠標進入時，hover效果會應用transition效果；鼠標移出，屬于非hover，沒有過渡效果；即，元素移動過程中，有過渡效果；元素回到原始位置，沒有過渡效果。將transition過渡寫在整個元素中，會在元素整個移動過程中起到過渡效果。

5、給每個小方塊加入動畫效果完整的css：

#fr{ width: 500px; height: 600px; border: 1px solid gray; margin: 20px auto; } .de{ width:100px; height:100px; border:1px solid green; margin: 10px auto; } .de:first-child{ transition: transform 1s; } .de:first-child:hover{ transform: translate(0px,-5px); } .de:nth-child(2){ transition: transform 1s; } .de:nth-child(2):hover{ transform: rotate(360deg); } .de:nth-child(3){ transition: transform 1s; } .de:nth-child(3):hover{ transform: skew(30deg ,30deg); } .de:last-child{ transition: transform 1s; } .de:last-child:hover{ transform: scale(1.05,1.05); }

以上是“Css中2d轉換怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！