css中变形,css3中变形处理
transfrom功能
在css3 中可以使用transfrom功能實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)，縮放，傾斜，移動(dòng)等變形處理
deg是css3中使用的一種角度單位。
旋轉(zhuǎn)： 使用rotate方法，在參數(shù)中加入角度值，在角度值后要加上角度單位deg。旋轉(zhuǎn)方向?yàn)轫槙r(shí)針。例rotate(45deg)
縮放： 使用scale方法，在參數(shù)中指定縮放的倍率，0.5表示縮小一半。scale(水平縮放倍率，垂直縮放倍率)，可以同時(shí)修改X，Y的縮放。scale(0.5,2)
傾斜： 使用skew方法，在參數(shù)中加入角度值，skew(水平傾斜角度，垂直傾斜角度)，如果只有一個(gè)參數(shù)則認(rèn)為只在水平方向傾斜。skew(30deg，30deg)
移動(dòng)： 使用translate方法，在參數(shù)中加入移動(dòng)值，translate(水平移動(dòng)距離，垂直移動(dòng)距離)以現(xiàn)在所處位置為原點(diǎn)，右邊為X軸，下邊為Y軸。
若只是用一個(gè)參數(shù)則默認(rèn)為只在X軸方向移動(dòng)，垂直方向不移動(dòng)。
#transform-1{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:rotate(45deg);}
#transform-2{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:scale(0.5);}
#transform-3{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:scale(0.5,2);}
#transform-4{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:skew(30deg,30deg);}
#transform-5{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:translate(30px,30px);}
可以對(duì)同一元素同時(shí)進(jìn)行旋轉(zhuǎn)，縮放，傾斜移動(dòng)。但先移動(dòng)與后移動(dòng)的效果不同。
指定變形的基準(zhǔn)點(diǎn)：使用transfrom方法進(jìn)行變形的時(shí)候是使用元素的中心為基準(zhǔn)點(diǎn)進(jìn)行變形的，使用transform-origin可以改變變形的基準(zhǔn)點(diǎn)。
使用3D變形功能
旋轉(zhuǎn)：transfrom：rotateX(30deg) rotateY(45deg) rotateZ(45deg);可以同時(shí)實(shí)現(xiàn)在不同軸上旋轉(zhuǎn)。
如果定義一個(gè)函數(shù)，動(dòng)態(tài)改變旋轉(zhuǎn)的度數(shù)。則可以實(shí)現(xiàn)動(dòng)態(tài)效果。
縮放：transfrom：scaleX(0.5) scaleY(1) scaleZ(2);可以同時(shí)實(shí)現(xiàn)在不同軸上縮放。
傾斜：transfrom：skewX skewY方法能使元素在x軸，y軸上順時(shí)針傾斜，但是沒有skewZ方法，二維傾斜。
移動(dòng)：使用translateX方法，translateY，translateZ在參數(shù)中加入移動(dòng)數(shù)值。
無標(biāo)題文檔#transform-1{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:rotate(45deg);}
#transform-2{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:scale(0.5);}
#transform-3{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:scale(0.5,2);}
#transform-4{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:skew(30deg,30deg);}
#transform-5{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:translate(30px,30px);}
#transform-6{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:rotate(45deg) scale(0.5,2) translate(30px,30px);}
#transform-7{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform: translate(30px,30px) rotate(45deg) scale(0.5,2);}
#transform-8{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:rotate(45deg);transform-origin:left bottom;}
#transform-9{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:rotate(45deg);transform-origin:top bottom;}
#div{ width:300px; height:100px; background-color:#3FF; text-align:center; transform: scale(0.5) rotateX(30deg) rotateY(45deg);}
#divv{ width:300px; height:100px; background-color:#3FF; text-align:center; transform: scaleX(0.5) scaleY(2); margin:40px auto; }
示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例示例var n,rotx,roty,rotz;
var div=document.getElementById("div");
function rotatex()
{ n=0;
clearInterval(rotx);
rotx=setInterval("startXRotate()",10);
}
function startXRotate()
{
n = n + 1;
div.style.transform ="rotateX(" + n + "deg)";
if (n ==450)
{
clearInterval(rotx);
n = 0;
}
}
function rotatey()
{
n = 0;
clearInterval(roty);
roty = setInterval("startYRotate()",10);
}
function startYRotate()
{
n = n + 1;
div.style.transform = "rotateY(" + n + "deg)";
if (n == 580) {
clearInterval(roty);
n = 0;
}
}
function rotatez()
{
n = 0;
clearInterval(rotz);
rotz = setInterval("startZRotate()", 10);
}
function startZRotate()
{
n = n + 1;
div.style.transform = "rotateZ(" + n + "deg)";
if (n == 360) {
clearInterval(rotz);
n = 0;
}
}
var n,scx,scy,scz;
var div1=document.getElementById("divv");
function scalex()
{ n=0;
clearInterval(scx);
scx=setInterval("startXscale()",10);
}
function startXscale()
{
n = n + 0.01;
div1.style.transform ="scaleX(" + n + ")";
if (n >=2)
{
clearInterval(scx);
n = 0;
}
}
function scaley()
{
n = 0;
clearInterval(scy);
scy = setInterval("scaleYRotate()",10);
}
function scaleYRotate()
{
n = n + 0.0001;
div1.style.transform = "scaleY(" + n + ")";
if (n >= 2) {
clearInterval(scy);
n = 0;
}
}
function scalez()
{
n = 0;
clearInterval(scz);
scz = setInterval("scaleZRotate()", 10);
}
function scaleZRotate()
{
n = n + 0.1;
div1.style.transform = "scaleZ(" + n + ")";
if (n >= 2) {
clearInterval(scz);
n = 0;
}
}
代碼效果圖
腳本的位置會(huì)影響程序的執(zhí)行嗎？會(huì)的
引用答案——通常情況下，JavaScript 代碼是和 HTML 代碼一起使用的，可以將 JavaScript 代碼放置在 HTML 文檔的任何地方。但放置的地方，會(huì)對(duì) JavaScript 代碼的正常執(zhí)行會(huì)有一定影響，具體如下所述。
放置于
之間將 JavaScript 代碼放置于 HTML 文檔的
標(biāo)簽之間是一個(gè)通常的做法。由于 HTML 文檔是由瀏覽器從上到下依次載入的，將 JavaScript 代碼放置于 標(biāo)簽之間，可以確保在需要使用腳本之前，它已經(jīng)被載入了；放置于
之間也有部分情況將 JavaScript 代碼放置于
之間的。設(shè)想如下一種情況：我們有一段 JavaScript 代碼需要操作 HTML 元素。但由于 HTML 文檔是由瀏覽器從上到下依次載入的，為避免 JavaScript 代碼操作 HTML 元素時(shí)，HTML 元素還未載入而報(bào)錯(cuò)(對(duì)象不存在)，因此需要將這段代碼寫到 HTML 元素后面，但通常情況下，我們操作頁面元素一般都是通過事件來驅(qū)動(dòng)的，所以上面這種情況并不多見。另外我們不建議將 JavaScript 代碼寫到 之外。
如果 HTML 文檔聲明為 XHTML ， 標(biāo)簽必須在 CDATA 部分內(nèi)聲明，否則 XHTML 將把 標(biāo)簽解析為另一個(gè) XML 標(biāo)簽，里面的 JavaScript 代碼可能不會(huì)正常執(zhí)行。因此，在嚴(yán)格的 XHTML 中使用 JavaScript 應(yīng)該像如下示例一樣聲明：
外部引用 JavaScript 代碼
將 JavaScript 代碼(不包括標(biāo)簽)單獨(dú)形成一個(gè)文檔，并以 js 后綴命名，如 myscript.js ，并在 HTML 文檔 標(biāo)簽中使用 src 屬性來引用該文件；
在使用了外部引用 JavaScript 代碼之后，其好處顯而易見：
1.避免在 JavaScript 代碼里使用
2.避免使用難看的 CDATA
3.公共的 JavaScript 代碼可以被復(fù)用于其他 HTML 文檔，也利于 JavaScript 代碼的統(tǒng)一維護(hù)
4.HTML 文檔更小，利于搜索引擎收錄
5.可以壓縮、加密單個(gè) JavaScript 文件
6.瀏覽器可以緩存 JavaScript 文件，減少寬帶使用(當(dāng)多個(gè)頁面同時(shí)使用一個(gè) JavaScript 文件的時(shí)候，通常只需下載一次)
7.避免使用復(fù)雜的 HTML 實(shí)體，如可以直接使用 document.write(2>1) 而無需寫作 document.write(2<1)
將 JavaScript 代碼形成為外部文件，也會(huì)增加服務(wù)器的 HTTP 請(qǐng)求負(fù)擔(dān)，在超高并發(fā)請(qǐng)求的環(huán)境下，這并不是一個(gè)好的策略。另外 在引用外部 js 文件時(shí)，需注意文件的正確路徑。
我認(rèn)為頁面效果實(shí)現(xiàn)類的js應(yīng)該放在body之前，動(dòng)作，交互，事件驅(qū)動(dòng)，需要訪問dom屬性的js都可以放在body之后
css3中變形與動(dòng)畫(三)
transform可以實(shí)現(xiàn)矩陣變換,transition實(shí)現(xiàn)屬性的平滑過渡,animation意思是動(dòng)畫,動(dòng)漫,這個(gè)屬性才和真正意義的一幀一幀的動(dòng)畫相關(guān).本文就介紹animation屬性. anima ...
css3中變形與動(dòng)畫(一)
css3制作動(dòng)畫的幾個(gè)屬性:變形(transform),過渡(transition)和動(dòng)畫(animation). 首先介紹transform變形. transform英文意思:改變,變形. css3 ...
css3中變形與動(dòng)畫(二)
css3制作動(dòng)畫的幾個(gè)屬性:變形(transform),過渡(transition)和動(dòng)畫(animation). transform介紹過了.接下來介紹過渡transition. 一.例子 先通過一 ...
css3中變形函數(shù)(同樣是對(duì)元素來說的)和元素通過改變自身屬性達(dá)到動(dòng)畫效果
/*對(duì)元素進(jìn)行改變(移動(dòng).變形.伸縮.扭曲)*/ .wrapper{ margin:100px 100px auto auto; width:300px; height:200px; border:2 ...
CSS3中的變形處理
在css3中,可以利用transform功能來實(shí)現(xiàn)文字或者圖像的旋轉(zhuǎn).縮放.傾斜.移動(dòng)這四種類型的變形處理. 旋轉(zhuǎn) 旋轉(zhuǎn)功能使用rotate方法參數(shù)中加入角度值,方向?yàn)轫槙r(shí)針旋轉(zhuǎn).示例清單如下: &l ...
CSS3中的變形與動(dòng)畫【轉(zhuǎn)】
最近在學(xué)習(xí)制作移動(dòng)端的頁面,做了一個(gè)微信頁面的小demo,其中用到了很多的CSS3新增的內(nèi)容,其中就有CSS3新增的變形和動(dòng)畫.其實(shí)這種CSS3的動(dòng)畫效果用JS也可以實(shí)現(xiàn),不過CSS3能開啟硬件加速, ...
CSS3中的變形處理(transform)屬性
在CSS3中,可以利用transform功能來實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn).扭曲.縮放.位移.矩陣.原點(diǎn)這六種類型的變形處理,下面將詳細(xì)講解transform的使用. 變形--旋轉(zhuǎn) rotate() div. ...
CSS3中的transform變形
在CSS3中,用Transform功能可以實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn).縮放.傾斜.移動(dòng)這四種類型的變形,這四種變形分別使用rotate.scale.skew和translate這四種方法來實(shí)現(xiàn).將這四種變形 ...
第8章 CSS3中的變形與動(dòng)畫(上)
變形--旋轉(zhuǎn) rotate() 旋轉(zhuǎn)rotate()函數(shù)通過指定的角度參數(shù)使元素相對(duì)原點(diǎn)進(jìn)行旋轉(zhuǎn).它主要在二維空間內(nèi)進(jìn)行操作,設(shè)置一個(gè)角度值,用來指定旋轉(zhuǎn)的幅度.如果這個(gè)值為正值,元素相對(duì)原點(diǎn)中心順時(shí) ...
隨機(jī)推薦
Android提高篇之自定義dialog實(shí)現(xiàn)processDialog“正在加載”效果、使用Animation實(shí)現(xiàn)圖片旋轉(zhuǎn)
知識(shí)點(diǎn): 1.使用imageview.textview自定義dialog 2.使用Animation實(shí)現(xiàn)圖片旋轉(zhuǎn)動(dòng)畫效果 3.通過自定義theme去掉dialog的title 沒有使用progres ...
Java 如何得到 JVM 虛擬機(jī)的 System Properties
Java 6 jps 命令得到進(jìn)程號(hào) jinfo -sysprops > sysprops.txt 打開 sysprops.txt 就可以查找 Language Time ...
php怎么獲取checkbox復(fù)選框的內(nèi)容？
由于checkbox屬性,所有必須把checkbox復(fù)選擇框的名字設(shè)置為一個(gè)如果checkbox[],php才能讀取,以數(shù)據(jù)形式,否則不能正確的讀取checkbox復(fù)選框的值哦.
解決ionic在ios無法使用focus,ios focus失效的問題
最近也偷懶,很久沒有寫博客了.今天在項(xiàng)目中遇到了這個(gè)奇葩的問題,基于ionic的ios的hybird APP 無法使用focus()獲取焦點(diǎn)和鍵盤的問題. 問題:基于ionic的ios的hybird ...
Jenkins2.32打包Unity項(xiàng)目的記錄
前言 使用jenkins來打包unity3d的工程. jenkins :2.50 /2.32.3(長(zhǎng)期支持版 建議使用此版本) 操作系統(tǒng):windows 7 x64 sp1 (打包安卓和win) ,m ...
web.py框架之基本應(yīng)用
一.基本應(yīng)用 1.1 Hello World! # coding:utf-8 import web urls = ( "/.*", "Tk_online" ) ...
Codeforces 906 D. Power Tower
http://codeforces.com/contest/906/problem/D 歐拉降冪 #include #include usi ...
go 通道
1. package main import "fmt" func sum(s []int, c chan int) { sum := for _, v := range s { ...
CSS的浮動(dòng)(float)
問題:在練習(xí)過程中,發(fā)現(xiàn)div1浮動(dòng)后,它下面的div被覆蓋住了. 解決方案:清除該div1的浮動(dòng). 關(guān)于CSS的浮動(dòng) 1.div是塊級(jí)元素,獨(dú)占一行 2.浮動(dòng)可以理解為讓某個(gè)div元素脫離標(biāo)準(zhǔn)流,漂 ...
科技發(fā)燒友之單反佳能700d中高端
http://detail.zol.com.cn/series/15/15795_1.html 前三 佳能 尼康 索尼 佳能5d 1.6w 佳能70d 5k 佳能6d 9k 佳能d7100 5k 尼康 ...
總結(jié)
以上是生活随笔為你收集整理的css中变形,css3中变形处理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle to char trim,
- 下一篇： java 变量作用域 c语言_C语言深入