CSS3_2D变换（六）
1、CSS3_2D变换
1.1 位移
translateX：设置水平位移长度，参考自身宽度；translateY：设置垂直位移长度，参考自身高度；translate：设置水平和位移距离。不脱离文档流，不影响其它元素，对行内元素无效，位移的效率比定位的效率高。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>位移</title>
<style>
.outer {
height: 200px;
width: 200px;
border: 1px solid black;
margin: 0 auto;
}
.inner {
height: 100px;
width: 100px;
background-color: aquamarine;
/* 相对于自己的位移 */
/* transform: translateX(50%) translateY(50%); */
/* 写两个值同时改变水平和垂直方向，写一个值值改变水平方向 */
transform: translate(50%, 50%);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
1.2 缩放
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>缩放</title>
<style>
.d1 {
height: 100px;
width: 100px;
background-color: aquamarine;
text-align: center;
margin: 0 auto;
line-height: 100px;
margin-top: 100px;
/* 将元素的宽和高同时放大1.5倍 */
/* transform: scaleX(1.5) scaleY(1.5); */
transform: scale(1.5);
}
.d2 {
height: 100px;
width: 100px;
background-color: aquamarine;
text-align: center;
margin: 0 auto;
line-height: 100px;
margin-top: 100px;
/* 将元素同时在水平和垂直方向上进行翻转 */
transform: scale(-1);
}
span {
/* 转为块元素 */
display: inline-block;
margin-top: 100px;
/* 可以突破浏览器对于文字最小字号的限制进行显示 */
transform: scale(0.5);
}
</style>
</head>
<body>
<div class="d1">
示例文字
</div>
<div class="d2">
示例文字
</div>
<span>行内文字</span>
</body>
</html>
1.3 旋转
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>旋转</title>
<style>
.outer {
height: 200px;
width: 200px;
border: 1px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner {
height: 200px;
width: 200px;
background-color: aquamarine;
/* 设置旋转的角度，正值为顺时针，负值为逆时针,旋转的时候默认绕着自身中心进行旋转，同时坐标轴也跟着旋转 */
rotate: 20deg;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
1.4 多重变换
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>多重变换</title>
<style>
.outer {
height: 200px;
width: 200px;
border: 1px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner {
height: 200px;
width: 200px;
background-color: aquamarine;
transform: translate(50%, 50%) rotate(10deg) scale(0.5);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
1.5 变换原点
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>变换原点</title>
<style>
.outer {
height: 200px;
width: 200px;
border: 1px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner {
height: 200px;
width: 200px;
background-color: aquamarine;
/* 像素值更改原点位置 */
/* transform-origin: 150px 150px; */
/* 百分比更改原点位置 */
/* transform-origin: 75% 75%; */
/* 关键字更改原点位置 */
/* transform-origin: right top; */
/* 只写一个值另一个方向为中间值更改原点位置 */
transform-origin: top;
/* 对旋转和缩放有影响 */
/* transform: scale(1.5) rotate(30deg); */
/* 对位移没有影响 */
transform: translate(100px, 100px);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
原文地址：https://blog.csdn.net/sjc122333/article/details/143608032
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！