CSS转换-将子div扩展到其父级宽度和高度

以下是我的出发点-

/*对于IE CSS3，从IE10开始的过渡属性工程*/ *{框大小：边框框；} 正文{字体系列：'Playfair Display'，衬线；边距：0；文本对齐：中心} h1{字体大小：正常；颜色：6A5953} kbd{字体大小：0.9em；显示：内联块；行高：1.1；} 分区，h2，img{ -webkit转换：.5s轻松输入输出； -moz转换：.5s易进易出； -o型过渡：.5s易进易出； 过渡：.5s易进易出； } 氢{ 颜色：E39F81； 文本阴影：1px 1px 0 FFE3BD； } h2：悬停{ 文本阴影：1px 1px 0 FFE3BD、2px 2px 0 FFE3BD、3px 3px 0 FFE3BD、4px 4px 0 FFE3BD、5px 5px 0 FFE3BD； } .家长{ 宽度：560px； 高度：386px； 保证金：0自动； 背景：黑色； 位置：相对位置； } .盒子{ 宽度：50%； 位置：绝对位置； 右：0； 顶部：153px； } .4{ 宽度：423px； 高度：248px； 背景色：95A1B1； 保证金：0自动； } .四：悬停{ 宽度：500px； 高度：300px； 盒影：0 15px 15px-10px rgba0,0,0,5； } CSS3转换示例 宽度、高度、长方体阴影 父对象具有固定大小和相对位置 子项具有“百分比”或任何具有“位置绝对”的大小类型，与父项固定大小相关的左上角位置可以是“甚至百分比父项” 过渡在已知尺寸上工作 下面是我为您准备的一个示例：

父对象具有固定大小和相对位置 子项具有“百分比”或任何具有“位置绝对”的大小类型，与父项固定大小相关的左上角位置可以是“甚至百分比父项” 过渡在已知尺寸上工作 下面是我为您准备的一个示例：

---

解决方案是首先将子对象放置在父对象内部，位置和大小与父对象完全一致，我们称之为子对象的实际位置。然后使用“变换”特性和“缩放”和“平移”函数将子对象定位在其起始位置。最后，当用户将鼠标悬停在子对象上时，可以将“平移”和“缩放”值重置回其默认值。这将产生将子对象设置为实际位置的动画效果

.家长{ 宽度：200px； 高度：150像素； 保证金：0自动； 背景：黑色； 位置：相对位置； } .盒子{ 转换：translate100px，53px scale0.5； 位置：绝对位置； 左：0； 排名：0； 右：0； 底部：0； 过渡：.5s易进易出； 背景：橙色； } .box:悬停{ 变换：translate0，0缩放1； } CSS3转换示例

---

解决方案是首先将子对象放置在父对象内部，位置和大小与父对象完全一致，我们称之为子对象的实际位置。然后使用“变换”特性和“缩放”和“平移”函数将子对象定位在其起始位置。最后，当用户将鼠标悬停在子对象上时，可以将“平移”和“缩放”值重置回其默认值。这将产生将子对象设置为实际位置的动画效果

.家长{ 宽度：200px； 高度：150像素； 保证金：0自动； 背景：黑色； 位置：相对位置； } .盒子{ 转换：translate100px，53px scale0.5； 位置：绝对位置； 左：0； 排名：0； 右：0； 底部：0； 过渡：.5s易进易出； 背景：橙色； } .box:悬停{ 变换：translate0，0缩放1； } CSS3转换示例

---

我有点困惑，因为类为“parent”的元素实际上不是任何东西的父元素。我假设您的html应该是这样的：如果要为元素设置动画，则该元素实际上是“parent”元素的子元素？我只将其称为parent，因为最后小div将堆叠在大div的顶部。我想它可以称为first div。。第二组。。为了清楚起见，解决方案可能涉及将“child”作为父元素的实际子元素。我有点困惑，因为类为“parent”的元素实际上不是任何东西的父元素。我假设您的html应该是这样的：如果要为元素设置动画，则该元素实际上是“parent”元素的子元素？我只将其称为parent，因为最后小div将堆叠在大div的顶部。我想它可以称为first div。。第二组。。为了清楚起见，解决方案可能涉及将“child”作为父元素的实际子元素。有没有充分的理由不这样做？

.parent {
  position:relative;
  width: 560px;
  height: 386px;
  margin: 0 auto;
  background: black;
  position: relative;
  background: red;
}
.child {
  position:absolute;
  background: blue;
  height:70%;
  width: 50%;
  right: -20%;
  top:15%;
  box-shadow: 0 15px 15px -10px rgba(0,0,0, .5);
  transition: all 0.5s ease; 
}
.parent:hover .child{
  top: 0%;
  right: 0;
  width:100%;
  height:100%;
  box-shadow: 0 0px 0px 0px rgba(0,0,0, .5);
}
.text{
  position:absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}