CSS3基础之2D转换，读完我这份《前端开发核心源码精编解析》面试至少多要3K总结面试前要精心做好准备，简历上写的知识

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

前端面试题汇总

JavaScript

前端资料汇总

开源分享：docs.qq.com/doc/DSmRnRG…

1.2D转换

=====================================================================

转换(transform) 是可以实现元素的位移，旋转，缩放等效果

移动：translate
旋转：rotate
缩放：scale

在CSS中的二维坐标系

在这里插入图片描述

1.1移动translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位

div { /* 以坐标形式来写 */ transform: translate(x, y); /* x,y分开来写 */ transform: translateX(100px); transform: translateY(100px); /* 百分数写法,相对自身来说 */ translate:(50%,50%)； }

定义2D转换中的移动，沿着X和Y轴移动元素
translate 最大的优点：不会影响到其他元素的位置
translate 中的百分比单位是相对于自身元素的
对行内标签没有效果

1.2旋转rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

transform: rotate(度数) /* 单位是deg */

rotate 里面跟度数，单位是 deg 例如 rotate(30deg)
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点

1.3旋转中心点transform-origin

2D转换中心点：可以设置元素转换的中心点 transform-origin

/* 坐标写法 */ transform-origin: x y; /* 方位名字写法 */ transform-origin: left bottom;

注意后面的参数x 和 y 用空格隔开
x y 默认转换的中心点是元素的中心点(50% 50%)
可以给x y 设置像素或者方位名词(top bottom left right center)

2.缩放scale

========================================================================

缩放：scale,只要给元素添加上了这个属性就能控制它放大还是缩小

transform: scale(x,y);

总结