css3的變形功能包括4種類型:1、旋轉,利用rotate()、rotateX()等實作;2、縮放,利用scale()、scaleX()等實作;3、傾斜,利用skew()、skewX()等實作;4、移動,利用translate()等實作。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
變形主要值得是利用transform功能來實現文字或圖片的旋轉,縮放,傾斜,移動這四種處理。
1、旋轉-----transform:rotate(xxdeg);
( IE9以上,safari 3.1以上, chrome 8以上、FireFox 4以上、Opera 10以上的瀏覽器都支援這些屬性)
先看範例:
<p> 这是一个测试。 </p> #test3{ width:300px; margin: 100px auto; font-size: 40px; transform:rotate(45deg); }
transform:rotate(45deg);這句表示p元素順時針45度旋轉,deg是一個角度單位。效果如下:
2、縮放-----transform:scale(x)
<p> 这是一个测试。 </p> #test4{ width:300px; margin: 100px auto; font-size: 40px; transform:scale(0.5); }
也可以分別指定元素水平和垂直方向上的縮放。例如,元素在水平方向縮小50%,在垂直方向放大一倍:
<p> 这是一个测试。 </p> #test5{ width:300px; margin: 100px auto; font-size: 40px; transform:scale(0.5,2); }
上面兩個縮放的效果如下:
來實現文字或圖片的傾斜處理,兩個參數分別指定水平方向上的傾斜角度和垂直方向的傾斜角度。例:
<p> 这是一个测试。 </p> #test6{ width:300px; margin: 100px auto; font-size: 40px; transform:skew(30deg,45deg); }
若只有一個參數,預設只在水平方向上傾斜,不在垂直方向傾斜。 4、移動:使用translate方法,兩個參數分別指定水平方向和垂直方向上的移動距離。若只有一個參數,預設只在水平方向上移動,垂直方向上不移動。
<p> 这是一个测试。 </p> #test7{ width:300px; margin: 100px auto; font-size: 40px; transform:translate(150px,150px); }###這些變形也可以組合使用:###
<p> 这是一个测试。 </p> #test8{ width:300px; margin: 100px auto; font-size: 40px; transform:rotate(45deg) scale(0.5) skew(30deg,45deg) translate(150px,150px); }###將元素45度順時針旋轉,在縮小一半,然後在水平方向傾斜30度,在垂直方向傾斜45度,在分別在水平和垂直方向上移動150px,效果如下:###############可以指定變形的基點:在使用transform進行變形時,是以元素的中心為基準點進行的。使用transform-origin屬性可以改變基準點。 ###
<p> 这是一个测试。 </p> <p> 这是一个测试。 </p> #test9{ position: absolute; width:150px; height:150px; background: green; margin: 100px 200px; font-size: 20px; transform:rotate(45deg); }#test10{ position: absolute; width:150px; height:150px; background: red; margin: 100px 200px; font-size: 20px; transform-origin:left top; /*定基准点*/ transform:rotate(45deg) }###效果如下:(紅色是把基準點頂到左上點的,綠色是預設的)############transform-origin屬性的取值,前一個是“基準點在元素水平方向上的位置”,可以指定的值有:left,center,right;後一個值是“基準點在元素垂直方向上的位置”,可以指定的值有:top,center, bottom.######(學習影片分享:###css影片教學###、###web前端###)###
以上是css3的變形功能包括哪種類型的詳細內容。更多資訊請關注PHP中文網其他相關文章!

两种方法:1、利用display属性,只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素,只需给元素添加“position:absolute;top:-9999px;”样式。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

自适应布局又称“响应式布局”,是指可以自动识别屏幕宽度、并做出相应调整的网页布局;这样的网页能够兼容多个不同的终端,而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的,能够为使用不同终端的用户提供很好的用户体验。

实现方法:1、使用“:active”选择器选中鼠标点击图片的状态;2、使用transform属性和scale()函数实现图片放大效果,语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

css3中的动画效果有变形;可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果,animation属性用于设置动画样式,transform属性用于设置变形样式。

在css3中,可以利用“animation-timing-function”属性设置动画旋转速度,该属性用于指定动画将如何完成一个周期,设置动画的速度曲线,语法为“元素{animation-timing-function:速度属性值;}”。

本篇文章带大家一起深入了解一下CSS3中的新特性::target-text 选择器,聊聊该选择器的作用和使用方法,希望对大家有所帮助!

css3线性渐变可以实现三角形;只需创建一个45度的线性渐变,设置渐变色为两种固定颜色,一个是三角形的颜色,另一个为透明色即可,语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

PhpStorm Mac 版本
最新(2018.2.1 )專業的PHP整合開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

ZendStudio 13.5.1 Mac
強大的PHP整合開發環境