1. 位移
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>位移</title>
<style>
/*
1.位移与相对定位相似，都不脱离文档流，不会影响到其他元素
2.与相对定位的区别：相对定位的百分比值，参考的是其父元素；定位的百分比，参考的是其自身
3.浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高
3.transform可以链式编写，如：transform: translateX(50%) translateY(50%);
4.位移对行内元素无效
5.位移配合定位，可以实现元素的水平垂直居中，如：
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
*/
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
position: relative;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
/* 水平位移 */
transform: translateX(50%);
/* 垂直位移 */
transform: translateY(50%);
/* 水平 + 垂直位移 */
transform: translate(50%, 50%);
}
.inner2 {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好</div>
</div>
<div class="outer">
<div class="inner2">你好</div>
</div>
</body>
</html>2. 缩放
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>缩放</title>
<style>
/*
1.scale的值，可以写负数（几乎不用，容易产生误解）
2.借助缩放，可以实现小于12px的文字
*/
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
position: relative;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
transform: scale(0.2);
}
span {
display: inline-block;
font-size: 20px;
transform: scale(0.5);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好</div>
</div>
<span>带带大师兄</span>
</body>
</html>3.旋转
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>旋转</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
position: relative;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
/* rotateZ(30deg) 等价于 rotate(30deg) */
transform: rotateZ(30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好</div>
</div>
</body>
</html>4. 扭曲
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>扭曲</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
position: relative;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
/* transform: skewX(0deg); */
/* transform: skewY(0deg); */
transform: skewX(30deg) skewY(30deg);
transform: skew(30deg, 30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好</div>
</div>
</body>
</html>5. 多重变换
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>多重变换</title>
<style>
/*
多重变换时，建议把旋转放到最后
*/
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
transform: translate(100px, 100px) rotate(30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好</div>
</div>
</body>
</html>6. 变换原点
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>变换原点</title>
<style>
/*
transform-origin: 50% 50%; 变换原点在元素中心的位置，百分比是相对于自身的（默认值）
transform-origin: left top; 变换原点在元素的左上角
transform-origin: 50px 50px; 变换原点在元素的左上角 50px 50px 的位置
transform-origin: left; 只写一个值的时候，第二个值默认为 50%
*/
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: skyblue;
/* 通过关键词 */
/* transform-origin: left top; */
/* 通过像素值 */
/* transform-origin: 50px 50px; */
/* 通过百分比 */
/* transform-origin: 25% 25%; */
/* 只给一个值 */
/* transform-origin: left; */
transform-origin: left top;
/* 变换原点位置的改变对 旋转 有影响 */
/* transform: rotate(0deg); */
/* 变换原点位置的改变对 旋转 有影响 */
transform: scale(1.2);
/* 变换原点位置的改变对 位移 没有影响 */
/* transform: translate(100px,100px); */
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好</div>
</div>
</body>
</html>
评论 (0)