CSS-размытое изображение / текст при резизации

Question

CSS-размытое изображение / текст при резизации

Я создаю эффект парения на своем веб-сайте, где вы наводите изображения (pngs), и они увеличиваются в размере. Проблема у меня в том, что теперь они становятся размытыми, когда они изменяют размер.

Код, который я использую, выглядит примерно так:

.div {

-webkit-transition: -webkit-transform 0.35s;

transition: transform 0.35s;

-webkit-transform: perspective(1000px) translate3d(0,0,1px);

transform: perspective(1000px) translate3d(0,0,0);

}



.div:hover {

-webkit-transform: perspective(100px) translate3d(0,0,1px);

transform: perspective(100px) translate3d(0,0,31px);



}

И вы можете увидеть эффект на этом jsfiddle: Введите описание ссылки здесь

Есть ли способ исправить это?

458 1

html css

1 ответ:

Comments

Ничего не найдено.

jaunt · Accepted Answer · 2015-06-24 19:47:20

Я думаю, что масштаб был бы более подходящим для этого. Это решение размывается только во время масштабирования.

.square {
  width:100px;
  height: 100px;
  background-color:black;
  margin: 50px;
}
p {
  color:white;
  text-align: center;
  padding-top: 35px;
}
.square {
  -webkit-transition: -moz-transform .3s ease-out; 
  -moz-transition: -webkit-transform .3s ease-out; 
  -o-transition: -o-transform .3s ease-out; 
  transition: transform .3s ease-out; 
}
.square:hover {
  -webkit-transform: scale(2);  
  -moz-transform: scale(2);    
  -o-transform: scale(2);
  transform: scale(2);
}

<div class="square">
  <p>Some text</p>                        
</div>