变形

2021-06-27 11:31:18 阅读：169 来源： 互联网

4.1变形

旋转

书写格式：transform：rotate（角度）；

取值：rotate（默认值） z轴旋转

注：给角度正值为顺时旋转，给负值为逆时针旋转
```
transform: rotate(45deg);
transform: rotateZ(45deg);
    transform: rotateX(-180deg);
    transform: rotateY(32deg);
```
rotate(角度)（默认值）Z轴旋转

transform: rotateZ（角度）Z轴旋转

transform: rotateX（角度）X轴旋转

transform: rotateY（角度）Y轴旋转

角度给正为顺时针，给负为逆时针
缩放

书写格式：transform: scale(倍数);

取值：大于1是放大，小于是缩小（且不会影响其他元素的尺寸）

建议：放大某个元素时，给父元素添加overflow：hidden

避免由于放大遮挡相邻元素的内容
多个变形效果同时生效

书写格式：transform: scale(2) rotate(45deg);

transform: 旋转缩放倾斜
```
transform: scale(2) rotate(45deg);
    background-color: gold;
```
倾斜skew

书写格式：transform:skew（角度）;

角度给正向左倾斜，给负值向右倾斜
```
transform: skew(30deg);
```
偏移量

书写格式：transform:translate(X轴偏移量，Y轴偏移量)

偏移量给正值，往相反方向移动

偏移量给负值，往相同方向移动
```
 transform: translate(-20px, 20px);
    transform: scale(0.5) rotateY(180deg) skew(10px, 10px);
```

画三角形

<div>width: 0px;
    border: 30px solid transparent;
    border-top-color: tomato;
<div>

三角旋转

本例：设置旋转的点（坐标）

transform-origin:X轴位置，Y轴位置

即X轴与Y轴交叉点就是旋转点 */
```
transform-origin: 50% 25%;
```

标签：rotate,变形,skew,transform,偏移量,旋转,角度
来源： https://www.cnblogs.com/zy950203/p/14940198.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

变形

4.1变形