css3的2D转换和3D转换
CSS3大纲：
本次讲解css3带来了两种转换：2D转换和3D转换
1. 2D转换
转换( transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移(transform)、旋转(rotate)、缩放(scale)等效果
2D转换是改变标签在二维平面上的位置和形状的一种技术，要先学习二维坐标系。
1.1 2D转换之移动 transform
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
语法格式：
transform: translate(x,y);
/*或者分开写*/
transform: translateX(n);
transform: translateY(n);
重点：
- 定义2D转换中的移动，沿着X和Y轴移动元素
- translate最大的优点:不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%);
- 对行内标签没有效果
基本示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2D转换之移动 transform</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*移动盒子的位置的方法： 定位 盒子的外边距 2d转换移动*/
div {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
/*1.1x就是x轴上移动位置 y就是y轴上移动位置 中间用逗号隔开*/
/*transform: translate(x,y);*/
/*transform: translate(100px,100px);*/
/*1.2只移动x坐标*/
/*transform: translate(100px,0);*/
/*transform: translateX(100px);*/
/*1.3只移动y坐标*/
/*transform: translate(0,100px);*/
/*transform: translateY(100px);*/
/*3.1我们里面的参数是可以用%*/
/*3.2如果里面的参数是%移动的距离是 自身的宽度或高度来对比的*/
/*这里的50%就是 50px 因为盒子的宽度是 100px*/
/*transform: translateX(50%);*/
}
/*2.translate最大的优点:不会影响到其他元素的位置*/
/*div:first-child{
transform: translate(30px,30px);
}
div:last-child {
background-color: purple;
}*/
p {
position: absolute; /*子绝父相*/
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: purple;
/*第一种方法*/
/*margin-top: -100px;
margin-left: -100px;*/
/*第二种方法*/
/*translate(-50%,-50%) 盒子往上走自己高度的一半*/
transform: translate(-50%,-50%);
}
span {
/*translate 对于行内元素是无效的*/
transform: translate(300px,300px);
}
</style>
</head>
<body>
<!--<div></div>-->
<!--<div></div>-->
<div>
<p></p>
</div>
<span>123</span>
</body>
</html>
效果一（在x、y轴上移动位置）和效果四（小盒子在大盒子水平居中）这就不展示了。
(2)translate移动不会影响到其他元素的位置
开始效果：
——>结束效果：
(3)translate:(50%,50%); 我们里面的参数是可以用%，如果里面的参数是%，那么移动的距离就是 自身的宽度或高度来对比的。
开始效果：
——>结束效果：
如何在谷歌查看鼠标移动在图片上面的样式？
进入https://chaoshi.jd.com/网页，在鼠标移动在图片上面就会向上移动的图片右击检查，然后在源代码上找到图片位置右击选择Force state，然后选择：hover，就可以查看鼠标移动在图片上面的样式。
1.2 2D转换之旋转rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
语法格式：
transform:rotate(度数)
重点：
- rotate里面跟度数，单位是deg比如rotate(45deg)
- 角度为正时，顺时针，负时，为逆时针
- 默认旋转的中心点是元素的中心点
基础示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2D转换之旋转rotate</title>
<style type="text/css">
img {
width: 150px;
height: 150px;
margin: 100px 0 0 100px;
/*顺时针旋转 45度*/
*transform: rotate(45deg);
border-radius: 50%;
border: 5px solid pink;
/*谁做过渡给谁加*/
transition: all .3s ;
}
/*当鼠标放在图片上，图片旋转一圈*/
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="img/s1.jpg" alt="" />
</body>
</html>
三角形案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三角形</title>
<style type="text/css">
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #000;
}
div::after {
content: '';
position:absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
transition: all .3s;
}
/*鼠标经过div 里面的三角旋转*/
div:hover::after {
/*这两种方式所出的效果一样，但加上过渡transition的属性，就要考虑是逆时针还是顺时针，因为旋转的效果不一样*/
*transform: rotate(225deg); /*为什么是225度旋转，而不是180度，因为原本就旋转了45度，而后又旋转180度，故而一共旋转225度*/
transform: rotate(-135deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.2.1 设置转换的中点 transform-origin
我们可以设置元素转换的中心点
语法格式：
transform-origin: x y;
重点：
- 注意后面的参数×和y用空格隔开（一般坐标的是空格隔开，其余大都是逗号隔开）
- x y默认转换的中心点是元素的中心点(50%50%)
- 还可以给xy设置像素或者方位名词( top bottom left right center )
基本示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置转换的中点 transform-origin</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all .3s;
/*可以跟方位名词*/
transform-origin: left bottom; /*左下角*/
/*2.默认的是 50% 50% 等价于 center center*/
transform-origin:50% 50%;
/*3.可以是px 像素*/
transform-origin: 20px 20px;
}
div:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
旋转案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旋转案例</title>
<style type="text/css">
div {
overflow: hidden; /*将超出盒子外面的隐藏起来*/
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 10px;
float: left;
}
div:before {
content: '黑马';
display: block;
width: 100%;
height: 100%;
background-color: hotpink;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all .4s;
}
/*鼠标经过div 里面的before 复原*/
div:hover::before {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
1.3 2D转换之缩放scale
缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
语法格式：
transform: scale(x,y);
注意：
- 注意其中的x和y用逗号分隔，x、y写的数字不跟单位 就是倍数的意思
- transform:scale(1,1):宽和高都放大一倍，相对于没有放
- transform:scale(2,2):宽和高都放大了2倍
- transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
- transform:scale(0.5,0.5):缩小
- sacle缩放最大的优势∶可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
基本示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2D转换之缩放scale</title>
<style type="text/css&#
最低0.47元/天 解锁文章
1374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
