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>