: после элемента с поворотным движением при изменении размера

Question

У меня есть: before и an: after элемент (для теневых целей) с преобразованием: поверните на него. : Перед тем, как оставаться на месте, когда размер видового экрана изменяется, однако: после перемещений немного вверх и вниз. Если поворот удаляется, он остается на месте при изменении размера. Как я могу заставить его оставаться на месте с изменением размера с помощью roate?

я поставил г-индекс: 1 на: до и: после того, как для видимости выпуска

Это тень # 3

http://codepen.io/mildrenben/details/jEYpyP/

HTML:

<h2>Shadow #3</h2> 
<div class="row shadow-3"> 
    <div class="shadow-box"> 
    <img> 
    </div> 
    <div class="shadow-box"> 
    <img> 
    </div> 
    <div class="shadow-box"> 
    <img> 
    </div> 
    <div class="shadow-box"> 
    <img> 
    </div> 
</div> 

CSS:

html, body { 
    width: 100%; 
    height: 100%; 
} 
.row { 
    height: 160px; 
    width: 80%; 
    margin: 0 auto 60px; 
    display: block; 
    img:nth-of-type(1) { 
     content: url(http://marshall.org/wp-content/themes/marshall/img/featured-space-policy.jpg); 
    } 
    img:nth-of-type(2) { 
     content: url(http://i.dailymail.co.uk/i/pix/2014/09/04/1409790551890_wps_28_Astronaut_Reid_Wiseman_po.jpg); 
    } 
    img:nth-of-type(3) { 
     content: url(http://cdn2.collective-evolution.com/assets/uploads/2014/08/life_in_space-728x400.jpg); 
    } 
    img:nth-of-type(4) { 
     content: url(http://s.ngm.com/2007/10/space-travel/img/space_feature.jpg); 
    } 
} 

img { 
    width: 23%; 
    margin: 0 1% 0 0; 
    height: 100%; 
    transition: all 0.2s ease-in-out; 
    cursor: pointer; 
} 

.shadow-box { 
    width: 23%; 
    margin: 0 1% 0 0; 
    height: 100%; 
    transition: all 0.2s ease-in-out; 
    cursor: pointer; 
    display: inline-block; 
    img { 
    width: 100%; 
    height: 100%; 
    &:hover { 
     transform: translateY(-4px); 
    } 
    } 
} 

.shadow-box:before, .shadow-box:after { 
    content: ''; 
    z-index: 1; 
    position: absolute; 
    width: 8%; 
    height: 110px; 
    background: red; 
    transform: skew(-10deg) rotate(-6deg) translate(calc(3% + 10px), 31px); 
    transition: all 0.2s ease-in-out; 
} 

.shadow-box:after { 
    transform: skew(10deg) rotate(6deg) translate(126%, -146px); 
} 

.shadow-box:hover:before, .shadow-box:hover:after { 
    box-shadow: 0 20px 20px lighten($black, 40%); 
} 

Answer 1

Я не думаю, что использование переводов - путь сюда, я бы поставил контейнер в положение: relative; а затем использовать абсолютное позиционирование в положение теневых вещей: http://jsfiddle.net/bpma9ko4/

Здесь соответствующие частей:

.shadow-box { 
    width: 45%; 
    margin: 0 1% 0 0; 
    height: 100%; 
    transition: all 0.2s ease-in-out; 
    cursor: pointer; 
    display: inline-block; 
    position: relative; 
} 

.shadow-box:before, .shadow-box:after { 
    content: ''; 
    z-index: 1; 
    position: absolute; 
    width: 40%; 
    height: 110px; 
    background: red; 
    transform: skew(-10deg) rotate(-6deg); 
    transition: all 0.2s ease-in-out; 
    top: 20px; 
    left: 20px; 
} 

.shadow-box:after { 
    transform: skew(10deg) rotate(6deg); 
    right: 20px; 
    left: auto; 
} 

В вашем примере, когда я удалил сдвиги, красный прямоугольник на правом пошел под изображение (на новая строка), а затем вы попытались перетащить его с помощью переводов, но для меня это гораздо более прямой путь, если вы просто поместите его поверх изображения, используя атрибуты top/left/right.

Примечание: Мой пример упрощен, у него нет теней и других вещей, он подрезается к частям, относящимся к вопросу.

Весь код:

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.row { 
 
    height: 160px; 
 
    width: 80%; 
 
    margin: 0 auto 60px; 
 
    display: block; 
 
    img:nth-of-type(1) { 
 
     content: url(http://marshall.org/wp-content/themes/marshall/img/featured-space-policy.jpg); 
 
    } 
 
    img:nth-of-type(2) { 
 
     content: url(http://i.dailymail.co.uk/i/pix/2014/09/04/1409790551890_wps_28_Astronaut_Reid_Wiseman_po.jpg); 
 
    } 
 
    img:nth-of-type(3) { 
 
     content: url(http://cdn2.collective-evolution.com/assets/uploads/2014/08/life_in_space-728x400.jpg); 
 
    } 
 
    img:nth-of-type(4) { 
 
     content: url(http://s.ngm.com/2007/10/space-travel/img/space_feature.jpg); 
 
    } 
 
} 
 

 
img { 
 
    width: 100%; 
 
    margin: 0 1% 0 0; 
 
    height: 100%; 
 
    transition: all 0.2s ease-in-out; 
 
    cursor: pointer; 
 
} 
 

 
.shadow-box { 
 
    width: 45%; 
 
    margin: 0 1% 0 0; 
 
    height: 100%; 
 
    transition: all 0.2s ease-in-out; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.shadow-box:before, .shadow-box:after { 
 
    content: ''; 
 
    z-index: 1; 
 
    position: absolute; 
 
    width: 40%; 
 
    height: 110px; 
 
    background: red; 
 
    transform: skew(-10deg) rotate(-6deg); 
 
    transition: all 0.2s ease-in-out; 
 
    top: 20px; 
 
    left: 20px; 
 
} 
 

 
.shadow-box:after { 
 
    transform: skew(10deg) rotate(6deg); 
 
    right: 20px; 
 
    left: auto; 
 
} 
 

 
.shadow-box:hover:before, .shadow-box:hover:after { 
 
    box-shadow: 0 20px 20px lighten($black, 40%); 
 
}

<h2>Shadow #3</h2> 
 
<div class="row shadow-3"> 
 
    <div class="shadow-box"> 
 
    <img src="http://placehold.it/466x180"> 
 
    </div> 
 
    <div class="shadow-box"> 
 
    <img src="http://placehold.it/466x180"> 
 
    </div> 
 
    <div class="shadow-box"> 
 
    <img src="http://placehold.it/466x180"> 
 
    </div> 
 
    <div class="shadow-box"> 
 
     <img src="http://placehold.it/466x180"> 
 
    </div> 
 
</div>