css3 translate3d(50%,50%,1rem) 参数指的是什么

html-css023

css3 translate3d(50%,50%,1rem) 参数指的是什么,第1张

元素的左边移动到自身宽度的50%位置，上边移动到自身高度的50%位置，z轴（你可以把z轴想象为你的眼睛与屏幕之间的垂线）移到1rem（rem=网页根元素的字体宽度）的位置（也就是相当于这个3D元素与屏幕的距离为1rem）

10% { background:red} 表示背景在0－1秒内变红色；

50% { width:80px} 表示宽度在0－5秒内由0变80px；

70% { border:15px solid yellow} 表示边框在0－7秒内由无边框变为15px实心的黄色边框；

100% { width:180pxheight:180px} 表示宽度从5－10秒变成180px，高度变成180px；

综上所述，前面的百分比，代表的是执行的时间，按秒来计算。

望采纳