CSS-преобразование px размер div до 100vw/100vh

У меня есть размер div в пикселях и по центру на экране с трюком top/left + transform. Я создал анимацию CSS для анимации этого окна, чтобы заполнить весь экран, но поскольку он основан на height/width, частота кадров ужасная.CSS-преобразование px размер div до 100vw/100vh

Вот демонстрация того, что я достиг. В то время как частота кадров достаточно приличная в скрипке, в моем фактическом варианте использования со многими другими элементами на странице частота кадров ужасна.

https://jsfiddle.net/ozxyfuje/

Я хочу, чтобы преобразовать это использовать transform, но я не уверен, как идти об этом, особенно учитывая transform, который уже есть в центр.

Я пытался использовать calc(), чтобы выяснить коэффициент масштабирования от размеров DIV и видовом, но, по-видимому vw и vh не совместимы с calc().

В идеале, я бы хотел (а) избегать JavaScript, но я могу принять решение на основе JavaScript в качестве последней инстанции.

источник

2017-01-02 Emphram Stavanger

попробуйте добавить спектрально-стиль: сохранить-3d; – slashsharp

Вы можете иметь несколько значений, разделенных пробелом, в том же объявлении для свойства 'transform'. – Ricky

Не могли бы вы сообщить мне, что не работает с ответом дано, так что я смогу настроить и вас принять? – LGSon

Чтобы избежать сценария вы должны работать с видовыми единицами всего пути, а затем использовать scale()

делать заметки, для того чтобы достигнуть лучший Perfomance не используют transition: all 0.5s, имя свойство которого будет переведено, как transition: transform 0.5s;

$("#hello").click(function(){ 
 
\t $("body").toggleClass("boom"); 
 
});

body { 
 
\t background: #222; 
 
\t 
 
\t /* full screen app */ 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t overflow: hidden; 
 
} 
 

 
#hello { 
 
\t background: #b00; 
 
\t 
 
\t /* pixel size set in stone */ 
 
\t width: 40vw; 
 
\t height: 40vh; 
 
\t 
 
\t /* center on screen */ 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%, -50%); \t 
 
\t transition: transform 0.5s; 
 
} 
 

 
.boom #hello { 
 
\t transform: translate(-50%, -50%) scale(2.5); \t 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
\t <div id="hello"> 
 
\t 
 
\t </div> 
 

 
</body>

источник

2017-01-02 20:39:38 LGSon

насколько я знаю не удается добиться этого, используя только CS S при сохранении фиксированной ширины и высоты (не зависит от ширины/высоты контейнера).

Вы можете достичь этого, используя JavaScript (jQuery в этом случае). Я добавляю класс «full», чтобы узнать, является ли элемент полным или нет, но вы можете достичь его с помощью логической переменной, например.

JSFiddle

$("#hello").click(function() { 
 

 
    if ($("#hello").hasClass('full')) { 
 

 
    $("#hello") 
 
     .removeClass('full') 
 
     .css({ 
 
     "transform": "translate(-50%, -50%)" 
 
     }); 
 

 
    } else { 
 

 
    $("#hello") 
 
     .addClass('full') 
 
     .css({ 
 
     "transform": "translate(-50%, -50%) scale(" + $(window).width()/200 + ", " + $(window).height()/160 + ")" 
 
     });// 200 & 160 is the div width & height in pixels, set in the CSS 
 

 
    } 
 
});

body { 
 
    background: #222; 
 
    /* full screen app */ 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
#hello { 
 
    background: #b00; 
 
    /* pixel size set in stone */ 
 
    width: 200px; 
 
    height: 160px; 
 
    /* center on screen */ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    /* animation */ 
 
    transition: 0.5s all; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hello"> 
 
</div>

источник

2017-01-02 21:14:44 Alvaro

CSS-преобразование px размер div до 100vw/100vh

ответ

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