Почему алмаз меняется на квадрат при наведении?

Я сделал сетку квадратов и повернул их с 45 градусами, чтобы сделать алмаз, но когда я навещу его, чтобы масштабировать его с помощью свойства преобразования CSS, алмаз снова изменяется на квадрат при наведении. Я не хочу, чтобы бриллиант вернулся на площадь. А также вы можете видеть, что часть квадрата скрывается внутри строки ниже.Почему алмаз меняется на квадрат при наведении?

Вот мой CSS код

.square { 
     width: 150px; 
     height: 150px; 
     background-color: white; 
     box-shadow: 1px 1px 5px rgba(0, 0, 0, .16); 
     transform: rotate(45deg); 
     transition: all 0.3s ease-in-out; 
    } 


.square:hover { 
    transform: scale(1.5); 
} 

.panel { 
    background: transparent; 
    margin-top: 50px; 
} 

.r2 { 
    transform: translateX(148px) translateY(-70%); 
} 

.r3 { 
    transform: translateY(-148%); 
} 

.row { 
    margin-top: 50px; 
}

Вот мой HTML

<body> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-3"> 
      <div class="square"> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="square"> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="square"> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="square"> 
      </div> 
     </div> 
    </div> 
    <div class="row r2"> 
     <div class="panel"> 
      <div class="col-md-3"> 
       <div class="square"> 
       </div> 
      </div> 
      <div class="col-md-3"> 
       <div class="square"> 
       </div> 
      </div> 
      <div class="col-md-3"> 
       <div class="square"> 
       </div> 
      </div> 
      <div class="col-md-3"> 
       <div class="square"> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row r3"> 
     <div class="col-md-3"> 
      <div class="square"> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="square"> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="square"> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="square"> 
      </div> 
     </div> 
    </div> 
</div>

http://codepen.io/yash51/pen/VjoQLr

источник

2016-08-28 Yashwardhan Pauranik

, пожалуйста, дайте нам jsfiddle, было бы проще помочь вам. – ZombieChowder

@ ZombieChowder Я предоставил код pen link –

Вы просто должны поставить функции преобразования в той же декларации:

т.е.:

.square:hover { 
    transform: scale(1.5) rotate(45deg); 
}

Вот working fiddle

Надеется, что это помогает.

источник

2016-08-28 12:53:18 JazZ

Большое вам спасибо :) –

Добро пожаловать. – JazZ

Вы можете пытаться изменить

.square:hover { 
    transform: scale(1.5); 
}

.square:hover { 
    transform: scale(1.5) rotate(45deg); 
}

Поскольку свойство преобразования не соответствует. Вы должны указать свое первое свойство: hover.

Стараюсь это решение в http://codepen.io/anon/pen/akZqOm

и это решение придет от https://stackoverflow.com/a/10765771/3808304

PS. Я плохо разбираюсь в английском. Надеюсь, вы поймете меня:)

источник

2016-08-28 12:56:04 KanisornS

Спасибо за помощь! Это сработало –

Почему алмаз меняется на квадрат при наведении?

ответ

Смежные вопросы