HTML5+CSS3

css3 属性选择器、结构伪类选择器，伪类选择器

CSS3 2D转换

转换是CSS3中具有颠覆性的特征之一，可以实现元素的
移动 translate
类似定位，是2D转换的一种功能，可以改变元素在页面中的位置。
移动盒子的位置： 定位 外边距 2D转换移动
x就是x轴上移动位置，y就是y轴上移动的位置 中间用逗号分隔
transform:translate(x,y);
特点：不会影响到其他元素的位置
如果里面的参数是%，移动的距离是盒子自身的宽度或者高度来对比的

translate(-50%,-50%); 盒子往上走自己高度的一半 transform:translate(-50%,-50%);

所以盒子垂直居中：可以用position 和 transform结合

translate对于行内元素是无效的。

transform:translateX(n);
transform:translateY(n);
旋转 rotate
transform:rotate(度数);
单位是deg
角度为正时，顺时针。角度为负时，逆时针。

transform:rotate(45deg);

过渡写到本身上，谁做动画给谁加

	div {
			position: relative;
			width: 249px;
			height: 35px;
			border: 1px solid #000;
		}
		div::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			width: 10px;
			height: 10px;
			border-right: 1px solid #000;
			border-bottom: 1px solid #000;
			transform: rotate(45deg);
		}

三角形顺时针旋转225度

<style>
		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 0.6s;
		}
		/*鼠标经过div里面的三角旋转*/
		div:hover::after {
			transform: rotate(225deg);
		}
	</style>

2D转换中心点 transform-origin
我们可以设置元素转换的中心点
transform-origin:x y ;
1.可以是方位名词：

transform-origin: left botttom;

2.默认是50% 50% 等价于 center center
3.可以是px像素

transform-origin: 50px 50px;

缩放 scale
2D 转换是改变标签在二维平面上的位置和形状的一种技术

来源：CSDN

作者：Zmongo

链接：https://blog.csdn.net/Zmongo/article/details/104219090