Czy można użyć właściwości transform: scale(x) przy jednoczesnym utrzymaniu elementu przyklejonego na dole strony? (domyślnie, jeśli skaluje się względem środka elementu, jak pokazano poniżej)

domyślne zachowanie skali
(źródło: w3schools.com)

12
Raz 28 sierpień 2012, 02:14

2 odpowiedzi

Najlepsza odpowiedź

Użyj właściwości transform-origin :

element{
    -webkit-transform : scale(0.5);
    -moz-transform : scale(0.5);
    -o-transform : scale(0.5);
    -ms-transform : scale(0.5);
    transform : scale(0.5);

    -webkit-transform-origin : 50% 100%;
    -moz-transform-origin : 50% 100%;
    -o-transform-origin : 50% 100%;
    -ms-transform-origin : 50% 100%;
    transform-origin : 50% 100%;
}

Oto demonstracja na żywo, która pokazuje transform-origin w akcji.

20
gion_13 28 sierpień 2012, 12:03

Pytanie brzmi, czy możesz wybrać, jaka jest oś dla obiektu. nie znam odpowiedzi na to pytanie i domyślam się, że prawdopodobnie nie.

Jeśli naprawdę nie możesz ustawić „osi”, będziesz musiał przekształcić pudełko, jednocześnie przesuwając je.

0
Kristian 28 sierpień 2012, 02:19