css3转换transform 移动旋转缩放
2018-11-21 本文已影响0人
pretty_rain
transform
在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate
1.rotate、scale、translate、skew
- 旋转 依次为 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转换</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-转换</header>
<section class="rotate">
<header>旋转0</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
<section class="rotate1">
<header>旋转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>移动0</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
<section class="translate1">
<header>移动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 属性用来设置 transform 变换的基点位置。默认情况下，基点位置为元素的中心点。
语法：
`
transform-origin: x-axis y-axis z-axis
`
| 名称 | 值 | 描述 |
|---|---|---|
| x-axis | 位置（left、center、right）/ 百分数 / 数值 | x轴 |
| y-axis | 位置（top、center、bottom）/ 百分数 / 数值 | y轴基点坐标 |
| z-axis | 数值 | z轴基点坐标 |
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3转换</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-转换</header>
<section class="rotate">
<header>旋转0</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
<section class="rotate1">
<header>旋转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>移动4</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
<section class="rotate5">
<header>移动5</header>
<div class="wrap-box">
<div class="oldbox"></div>
<div class="box"></div>
</div>
</section>
</div>
</body>
</html>
效果
image.png
