前端提高篇（五十）CSS3进阶13transform形状变换(2D)案例：用旋转和li画钟表的12根针

left: 50%

margin-left：盒子宽度的一半的负数

transform : translateY(-50%)

未知宽度同理，把宽translate50%

完整代码如下：

.wrapper {

border: 20px solid orange;

width: 600px;

height: 600px;

position: relative;

}

.wrapper img {

position: absolute;

top: 50%;

left: 50%;

width: 200px;

/* margin-top: -159px; */

/* margin-left: -100px; */

transform: translate(-50%, -50%);

}

4.如果向XY轴各平移100px，不能写成：

transform : translateX(100px);

transform : translateY(100px);

由于设置的是同一个属性：transform，后者会覆盖前者，只有向Y轴平移的效果生效

要写成

transform : translateX(100px) translateY(100px);

中间没有逗号

或者简写成：transform: translate(x,y);，如果只写一个值，代表水平移动，Y轴不移

缩放：scale

scaleX(n)：水平方向拉伸到原来的n倍，以中心点为轴，两边伸缩，n大于1是放大，小于1是缩小，负值代表翻转

scaleY()

scaleZ()

scale3d(x,y,z)

简写：scale(x,y) | scale(n) -> scale(n,n)，如果只写一个值，水平垂直都缩放，如果写两个值，第一个是水平，第二个是垂直方向

默认图片的中心点就是其原点，缩放也是以中心点向四方缩放的

同样不能写两行，一行scaleX，一行scaleY，这样会覆盖，只保留后者的样式

设置scaleX(-0.5):

transform: translate(200px, 200px) scaleX(-0.5);

效果：水平方向翻转并缩小到原来的0.5，原图文字是：‘萌，’

transform-origin

transform-origin设置元素原点位置

transform-origin: 50% 50% 0;默认值

X轴方向：left | center | right | length | %

Y轴方向：top | center | bottom | length | %

Z轴方向：length

原图直接展示的效果：

当我用默认的origin时，scale(2,0.5)的效果是：在中心位置开始，高度缩小，宽度缩小

transform: scale(2, 0.5);

当我将中心点设置在左上角时：

transform-origin: 0 0;

transform: scale(2, 0.5);

可以看到，此时是从左上角开始缩放的

旋转：rotate

rotateX()

rotateY()

rotateZ()

rotate3d(x,y,x)

简写：rotate() -> rotateZ()，当写rotate时，默认就是沿Z轴旋转

当沿x轴方向旋转，会呈现前面大，后面小的效果，由于图片不是3d的，没有厚度，所以看不出来前大后小的效果，只能看到高度变小了，旋转90deg时，就看不见了（不是一条线），因为没有厚度

以下动图是图片rotate从45deg到90deg的效果

角度可以是负数，代表旋转方向，一圈360deg

同理，一张图片沿着Y轴旋转，肉眼可见的是，图片宽度变小，当旋转到90deg时，也是看不见了

沿Z轴旋转：rotateZ

从45deg转：

默认旋转中心点就是图片中心点

将旋转中心点设置成图片上方边缘正中：

width: 200px;

transform-origin: 100px 0;/* 或者写50% 0;或者center top;*/

transform: rotate(45deg);

从45deg向0deg改变：

案例：

画一个钟，有12个指针，用12个li和旋转实现

body, ul, li {

padding: 0;

margin: 0;

list-style: none;

}

ul {

margin: 0 auto;

position: relative;

width: 300px;

height: 300px;

border-radius: 50%;

border: 2px solid #000;

}

ul li {

position: absolute;

top: 0;

left: 150px;

width: 2px;

height: 10px;

background: #000;

margin-left: -1px;

}

画一个圆，12个li目前都在0点位置

我们希望li能够绕着圆的中心旋转，而默认旋转的中心点是元素本身的中心点，即：

li:nth-child(1) {

transform: rotate(30deg)

}

可以看到，旋转的中心点在元素本身的中心，所以第一个li旋转之后，与其他li形成了类似’x’的形状：

于是，我们要调整transform-origin，可以想像一下，origin设置成0 0 是元素li的左上角，那么，1px 150px，是不是就是圆中心了（li宽2px，圆半径150px）

效果：

一个li效果已完成，12个li都手动设置，代码太冗长，用js自动生成li以及旋转的样式

var oUl = document.getElementsByTagName(‘ul’)[0];

var str = ‘’;

for (var i = 1; i <= 12 ; i ++){

str += ‘

• ’

  }

  oUl.innerHTML = str;

  效果：

  

  完整css代码：

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
  …(img-prBSqUta-1715888853416)]

  [外链图片转存中…(img-AKxOOscA-1715888853416)]

  [外链图片转存中…(img-29UDvHKS-1715888853416)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！