css-transforms

<!DOCTYPE html> <meta charset="utf-8"> <title>An HTML Document</title> <style> #container { -webkit-perspective: 300px; -moz-perspective: 300px; } #contents { width: 300px; height: 300px; background: red; -webkit-transfo...

Я создаю веб-сайт карт, такой как google maps. Там будут плитки изображений, соединенных друг с другом. Карта будет исследоваться путем перетаскивания мышью, где после каждого перетаскивания будут загружаться новые изображения. Для того, чтобы иметь функциональность explore-by-Drag, я нашел два способа: вы...

При использовании css3 transform(), position: fixed не применяется. Я сделал полностью работающий jsFiddle, показывающий проблему: http://jsfiddle.net/SR5ka/ Сначала прокрутите вниз, обратите внимание, что левая боковая панель остается неподвижной. Теперь нажмите expand и прокрутите вниз, заметьте, что лева...

Я создал фигуру, которая представляет собой страницу с тенью, которая становится больше к нижней части. body { background: #dddddd; } div { background: white; margin: 40px auto; height: 300px; width: 300px; position: relative; padding: 10px; } div:before, div:after { height...

На этот вопрос уже есть ответ здесь: Как применить несколько преобразований вращения CSS3 (compounded) без javascript? 2 ответа Итак, у меня есть следующий CSS: div { transform: translate(10, 10); } div.active {...

Я практикуюсь в html и у меня проблема. Во-первых, мой код: i:hover{ transform: rotate(360deg); transition: 1s all; } i{ transition: 1s all; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="s...

Я пытаюсь обернуть свой крошечный мозг вокруг 3D CSS-преобразований, и мне трудно понять, для чего предназначена функция scaleZ(). scale(), scaleX() и scaleY() имеют смысл: они растягивают элемент вдоль указанной оси, умножая его размер вдоль этой оси на число, которое вы предоставляете. Но scaleZ() кажется...

у меня есть ситуация, когда в обычных обстоятельствах CSS фиксированный div будет расположен именно там, где он указан (top:0px,left:0px). Это, кажется, не соблюдается, если у меня есть родитель, который имеет преобразование translate3d. Разве я ничего не вижу? Я пробовал другие варианты webkit-transform, т...

допустим, у меня есть несколько столбцов, из которых некоторые я хотел бы повернуть значения: http://jsfiddle.net/MTyFP/1/ <div class="container"> <div class="statusColumn"><span>Normal</span></div> <div class="statusColumn"><a>Normal</a></div> ...

по аналогии с "преобразование css, зубчатые края в chrome", то же самое происходит с Firefox на 3D преобразования, например:http://jsfiddle.net/78d8K/5/ (Firefox) в этот раз backface-visibility не помогает :( есть идеи?...