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

html-css014

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；

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

望采纳

padding 简写属性在一个声明中设置所有内边距属性。

padding 50% ，上下左右填充50% 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

* { margin:0 padding:0 }

#div1, #div2 { width:100px height:100px margin:10px padding:50% border:1px solid #0CF}

</style>

</head>

<body>

<div id="div1"></div>

<div id="div2"></div>

</body>

</html>

去掉padding:50%,浏览器显示效果：

运行以上代码测试看效果