transform
在CSS3中transform主要包括以下幾種：旋轉(zhuǎn)rotate候齿、扭曲skew停士、縮放scale和移動(dòng)translate以及矩陣變形matrix审胸。下面我們一起來看看CSS3中transform的旋轉(zhuǎn)rotate啡捶、扭曲skew啼止、縮放scale和移動(dòng)translate
1.rotate道逗、scale、translate族壳、skew
- 旋轉(zhuǎn) 依次為 z軸憔辫、z軸 、x軸 仿荆、y軸
rotate(30deg) rotateZ(30deg) rotateX(30deg) rotateY(30deg) - 縮放 依次為 x方向y方向贰您、x方向、y方向
scale: scale(1.2,0.8) scaleX(1.2) scaleY(0.8) - 位移 依次為 x方向y方向拢操、x方向锦亦、y方向
translate(20px,-30px) translateX(20px) translateY(-30px)
-扭曲 依次為 x軸y軸、x軸令境、y軸
skew(anglex,angley) skewX(angle) skewY(angle)
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3轉(zhuǎn)換</title>
<style>
body {
margin: 0;
padding: 0;
font-family: '微軟雅黑';
background-color: #F7F7F7;
}
.wrapper {
width: 1024px;
margin: 0 auto;
}
.wrapper > section {
width:100px;
height:100px;
margin-bottom: 20px;
box-shadow: 1px 1px 4px #DDD;
background-color: #FFF;
float:left;
margin-right:20px;
}
section > .wrap-box {
position:relative;
}
section > header {
margin-bottom:20px;
}
.oldbox {
width:50px;
height:50px;
position:absolute;
top:0;
left:50%;
margin-left:-25px;
border:1px dashed red;
z-index:2;
box-sizing:border-box;
}
.box {
width: 50px;
height: 50px;
background-color: yellow;
margin:0 auto;
position:absolute;
top:0;
left:50%;
margin-left:-25px;
z-index: 1;
}
.rotate .box {
transform:rotate(275deg) translate(0px,10px) scale(1.2);
}
.rotate1 .box {
transform:rotate(-45deg);
}
.scale .box {
transform:scale(0.5);
}
.scale1 .box {
transform:scale(0.5,1.2);
}
.translate .box {
transform:translateX(-30px);
}
.translate1 .box {
transform:translate(20px,20px);
}
.skew .box {
transform:skew(45deg);
}
.skew1 .box {
transform:skew(20deg,20deg);
}
</style>
</head>
<body>
<div class="wrapper">
<header>CSS3-轉(zhuǎn)換</header>
<section class="rotate">
<header>旋轉(zhuǎn)0</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
<section class="rotate1">
<header>旋轉(zhuǎn)1</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
<section class="scale">
<header>縮放0</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
<section class="scale1">
<header>縮放1</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
<section class="translate">
<header>移動(dòng)0</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
<section class="translate1">
<header>移動(dòng)1</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
<section class="skew">
<header>傾斜0</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
<section class="skew1">
<header>傾斜1</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
</div>
</body>
</html>
image.png
2.transform-origin
- transform-origin 屬性用來設(shè)置 transform 變換的基點(diǎn)位置杠园。默認(rèn)情況下，基點(diǎn)位置為元素的中心點(diǎn)舔庶。
語法：
`
transform-origin: x-axis y-axis z-axis
`
| 名稱 | 值 | 描述 |
|---|---|---|
| x-axis | 位置（left抛蚁、center、right）/ 百分?jǐn)?shù) / 數(shù)值 | x軸 |
| y-axis | 位置（top惕橙、center瞧甩、bottom）/ 百分?jǐn)?shù) / 數(shù)值 | y軸基點(diǎn)坐標(biāo) |
| z-axis | 數(shù)值 | z軸基點(diǎn)坐標(biāo) |
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3轉(zhuǎn)換</title>
<style>
body {
margin: 0;
padding: 0;
font-family: '微軟雅黑';
background-color: #F7F7F7;
}
.wrapper {
width: 1024px;
margin: 0 auto;
}
.wrapper > section {
width:100px;
height:100px;
margin-bottom: 20px;
box-shadow: 1px 1px 4px #DDD;
background-color: #FFF;
float:left;
margin-right:20px;
}
section > .wrap-box {
position:relative;
}
section > header {
margin-bottom:20px;
}
.oldbox {
width:50px;
height:50px;
position:absolute;
top:0;
left:50%;
margin-left:-25px;
border:1px dashed red;
z-index:2;
box-sizing:border-box;
}
.box {
width: 50px;
height: 50px;
background-color: yellow;
margin:0 auto;
position:absolute;
top:0;
left:50%;
margin-left:-25px;
z-index: 1;
}
.rotate .box {
transform-origin:center center;
transform:rotate(45deg);
}
.rotate1 .box {
transform-origin:right bottom;
transform:rotate(45deg);
}
.rotate2 .box {
transform-origin:50% 50%;
transform:rotate(45deg);
}
.rotate3 .box {
transform-origin:100% 100%;
transform:rotate(45deg);
}
.rotate4 .box {
transform-origin:25px 25px;
transform:rotate(45deg);
}
.rotate5 .box {
transform-origin:50px 50px;
transform:rotate(45deg);
}
</style>
</head>
<body>
<div class="wrapper">
<header>CSS3-轉(zhuǎn)換</header>
<section class="rotate">
<header>旋轉(zhuǎn)0</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
<section class="rotate1">
<header>旋轉(zhuǎn)1</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
<section class="rotate2">
<header>縮放2</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
<section class="rotate3">
<header>縮放3</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
<section class="rotate4">
<header>移動(dòng)4</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
<section class="rotate5">
<header>移動(dòng)5</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
</div>
</body>
</html>
效果
image.png
