اشکال در transform

با سلام

برای این مورد، علاوه بر روشی که دوستمون بهش اشاره کردند یعنی استفاده از مقدار معکوس scale برای عناصر فرزند، ( البته با در نظر گرفتن این نکته که هنگام استفاده از transition در این روش، متن ممکن است حالت محو و تار blury داشته باشد )،

یک روش دیگر هم که میشه امتحان کرد، استفاده از عنصر مجازی(before ( pseudo-element:  می باشد. به این صورت که یک عنصر مجازی برای باکس مورد نظر یا همان عنصر والد ( parent ) تعریف شود و با  تعیین position:relative  برای باکس و position:absolute  برای عنصر مجازی و تعیین مقادیر لازم، کاری کنیم که این عنصر مجازی تمام باکس را بپوشاند

.parent:before {
  z-index: -1;
  content: "";
  background: inherit;
  transform-origin: center;
  transition: transform 3s;
  position: absolute;/* Position absolutely, and use offsets to cover entire parent element */
  left: 0;
  top: 0;
  bottom: 0;
  right:0;
}

و بعد () transform: scale  را به جای باکس، بر روی این عنصر مجازی اعمال کنیم. در این صورت متن ( که در اینجا عنصرفرزند باکس مورد نظر محسوب می شود )، بدون تغییر می ماند.

.parent:hover:before { 
  transform: scale(1.5);
}

نمونه  jsbin

با استفاده از این مقاله

سلام

احتمالا مجبور باشید مقدار معکوسش را برای عناصر فرزند اعمال کنید. این مثال را ببینید.