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开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!