css3 — 2D變形
阿新 • • 發佈：2020-10-31
transform 設定元素的變形，可以設定一個或多個以上的變形元素 目前包括以下五個函式
translate(x,y) 元素向x，y軸移動
rotate(angle) 元素選擇angle角度， angle單為為deg
scale(x,y) 表示元素縮放比
skew(anglex,angley) 元素x，y傾斜角度
matrix(a,b,c,d,x,y) 將旋轉，縮放，移動，傾斜組合在一起
transform-origin： 表示元素旋轉的中心點，預設值為50%，50%
<!DOCTYPE html> <html> <head> <style> #div1View Code{ position: relative; height: 200px; width: 200px; margin: 100px; padding:10px; border: 1px solid black; } #div2 { padding:50px; position: absolute; border: 1px solid black; background-color: yellow; transform: rotate(45deg); transform-origin:20% 40%; -ms-transform: rotate(45deg); /* IE 9 */ -ms-transform-origin:20% 40%; /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari and Chrome */ -webkit-transform-origin:20% 40%; /* Safari and Chrome */ -moz-transform: rotate(45deg); /* Firefox */ -moz-transform-origin:20% 40%; /* Firefox */ -o-transform: rotate(45deg); /* Opera */ -o-transform-origin:20% 40%; /* Opera */ } </style></head> <body> <div id="div1"> <div id="div2">HELLO</div> </div> </body> </html>