1、位移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>位移</title>
<style>
/*
1.位移与相对定位很相似，都不脱离文档流，不会影响到其他元素。
2与当对定位的区别：相对定位的百分比值，参考的是父元素；定位的百分比值，参考的是其自身。
3.浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高
4.位移配合定位，可实现元素水平垂直居中
位移对行内元素无效 */
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin:0 auto ;
margin-top: 100px;
position: relative;
}
.son{
width: 200px;
height: 200px;
background-color: deepskyblue;
/* 水平位移 */
/* transform: translateX(-50%); */
/* 垂直位移 */
/* transform: translateY(-50%); */
/* 水平垂直位移 */
/* transform: translate(50%,50%); */
}
.son2{
width: 60px;
height: 60px;
background-color: orange;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="outer">
<div class="son">你好啊</div>
</div>
<div class="outer">
<div class="son2">你好啊</div>
</div>
</body>
</html>2、缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>缩放</title>
<style>
/*
位移：
1.位移与相对定位很相似，都不脱离文档流，不会影响到其他元素。
2与当对定位的区别：相对定位的百分比值，参考的是父元素；定位的百分比值，参考的是其自身。
3.浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高
4.位移配合定位，可实现元素水平垂直居中
缩放：
1.scale的值，是支持写负数的，但几乎不用，因为容易让人产生误解
2.借助缩放，可实现小于12px的文字。
位移对行内元素无效 */
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin:0 auto ;
margin-top: 100px;
}
.son{
width: 200px;
height: 200px;
background-color: deepskyblue;
/*水平横向缩放*/
/* transform: scaleX(1。5); */
/* 纵向缩放 */
/* transform: scaleY(0.5); */
/*同时都缩放*/
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="outer">
<div class="son">你好啊</div>
</div>
</body>
</html>3、旋转
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转</title>
<style>
/*
位移：
1.位移与相对定位很相似，都不脱离文档流，不会影响到其他元素。
2与当对定位的区别：相对定位的百分比值，参考的是父元素；定位的百分比值，参考的是其自身。
3.浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高
4.位移配合定位，可实现元素水平垂直居中
缩放：
1.scale的值，是支持写负数的，但几乎不用，因为容易让人产生误解
2.借助缩放，可实现小于12px的文字。
旋转：
rotateZ(20deg) 相当于rotate(20deg),当然到了3D变换的时候，还能写：rotate(x,x,x)
位移对行内元素无效 */
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin:0 auto ;
margin-top: 100px;
}
.son{
width: 200px;
height: 200px;
background-color: deepskyblue;
/*正数顺时针旋转，负数逆时针旋转*/
/* transform: rotateZ(-30deg); */
transform: rotate(30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="son">你好啊</div>
</div>
</body>
</html>4、扭曲
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转</title>
<style>
/*
位移：
1.位移与相对定位很相似，都不脱离文档流，不会影响到其他元素。
2与当对定位的区别：相对定位的百分比值，参考的是父元素；定位的百分比值，参考的是其自身。
3.浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高
4.位移配合定位，可实现元素水平垂直居中
缩放：
1.scale的值，是支持写负数的，但几乎不用，因为容易让人产生误解
2.借助缩放，可实现小于12px的文字。
旋转：
rotateZ(20deg) 相当于rotate(20deg),当然到了3D变换的时候，还能写：rotate(x,x,x)
位移对行内元素无效 */
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin:0 auto ;
margin-top: 100px;
}
.son{
width: 200px;
height: 200px;
background-color: deepskyblue;
/* transform: skewX(30deg); */
/* transform: skewY(30deg); */
/*写一个值按x轴扭曲*/
transform: skew(30deg,30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="son">你好啊</div>
</div>
</body>
</html>5、多重变换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多重变换</title>
<style>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin:0 auto ;
margin-top: 100px;
}
.son{
width: 200px;
height: 200px;
background-color: deepskyblue;
/*注意：多重交换时，建议最后旋转*/
transform: translate(100px,100px) rotate(30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="son">你好啊</div>
</div>
</body>
</html>6、变换原点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>位移</title>
<style>
/*
变换原点
1.元素变换时，默认的原点是元素的中心，使用transform-orgin可以设置变换的原点
2.修改变换原点对位移没有影响，对旋转和缩放就会产生影响。
3.如果只提供一个，若是像素值，表示横坐标，纵坐标取50%；若是关键词，则另一个坐标取50%
*/
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin:0 auto ;
margin-top: 100px;
position: relative;
}
.son{
width: 200px;
height: 200px;
background-color: deepskyblue;
/*通过关键词调整变换原点*/
/* transform-origin: left top; */
/*通过具体像素值调整变换原点*/
/* transform-origin: 50px 50px; */
/*通过百分比调整变换原点*/
/* transform-origin: 25% 25%; */
/* 只给一个值 */
/* transform-origin: left; */
/* transform-origin: left top; */
/*变换原点位置的改变对 旋转 有影响*/
/* transform: rotate(0deg); */
/*变换原点位置的改变对 缩放 有影响*/
/* transform: scale( 0.3); */
/* 变换原点位置的改变对 位移 没有影响 */
/* transform: translate(100px 100px); */
}
.test{
width: 50px;
height: 50px;
background-color: orange;
}
</style>
</head>
<body>
<div class="outer">
<div class="son">
<div class="test">你好啊</div>
</div>
</div>
</div>
</body>
</html>
评论 (0)