Почему transform: translate(-50%, -50%) размывает текст?

#html #css #transform

Много где я использую эту фичу, ибо удобно:

@include transform(translate(-50%, -50%));
          left: 50%;
          top: 50%;


но появилась проблема со шрифтами, они становятся размытыми 

вот С этим стилем: 



вот БЕЗ этого стиля: 



Пробовал давать translateZ(0) -не помогло

Что можете посоветовать?
Спасибо
    

Ответы

Ответ 1

Есть один метод, случайно дошел сам, когда столкнулся с той же проблемой.

Рецепт:
Добавить больший z-index анимируемому элементу и меньший z-index не анимируемому
в данном случае блоку с текстом.

В чем соль?

Соль в том, что когда у нас есть анимация/переход/трансформация, то она действует
на все слои (позиционированную html-разметку). Чтобы этого избежать нужно указать на
какой слой будет воздействие, в этом нам поможет z-index. Когда мы прописываем больший
z-index анимации, мы говорим что нам нужны изменения со слоя n и выше. Т.е слои которые
находятся под анимируемым затронуты анимацией/переходом/трансформацией не будут (Попробуйте
сделать наоборот и работать ничего не будет).

P.S Читал пару статей в интернете про аппаратное ускорение. Кстати там говорилось
о композитных слоях, но про z-index сказано не было. Но видать это очень важная вещь
как оказывается.


Ответ 2

Тоже искал решение этого вопроса, методом тыка выяснил, помогло свойство line-height: 1;


Ответ 3

Тоже задался вопросом (пока искал, заметил этот же баг на это сайте при регистрации,
когда всплывает окно для загрузки картинки профиля) и нашел причину: это единицы измерения.
Видимо, браузер располагает блок автоматом, например, на 120.5px, и из-за этого не
может нормально прорисовать. Для проверки добавлял 1px высоты блоку вручную - всё идеально.
Добавляешь 2px - снова размывается, и т.д. В Мозилле всё отлично, а вот хром такую
фигню выдает. Остается только скриптом проверять высоту блока или что-то подобное использовать:
transform: translate(0,-50.1%);
Попробовал вот такое решение JQ на одном сайте, вроде работает:

var newht=$('.modalBlock').height();
newht=($(window).height()-newht)/2;
if(newht%1!=0){
$('.modalBlock').height($('.modalBlock').height()+1);
}


При каждой отрисовке модального окна предварительно высоту обновлять тоже через JS
(если вдруг высота блока меняется и модалки разные):

$('.modalBlock').css('height','auto');


Либо, на чистом JS аналогичное делать, кому как удобнее.


Ответ 4

В моём случае размытость возникала из-за border: 1px; в блоке.

Плавное появление элемента из display:none в inline

#html #jquery #css #transform #display

Интересует такая штука – как заставить блок расширяться плавно при наведении, то
есть иконка становится видимой по мере того, как в течение анимации до конца выезжает
кнопка справа? 



body {
  font-family: "Roboto";
  font-weight: 100px;
}

.cat-block {
  position: relative;
  display: inline-block;
}

.cat-block .category {
  background-color: rgba(255, 255, 255, 0);
  padding: 3px 8px 3px 8px;
  box-shadow: 0px 0px 35px 0px rgba(1, 2, 4, 0.25);
  float: left;
  -webkit-transition: .2s ease-out;
  -o-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  transition: .2s ease-out;
  margin: 0;
  z-index: 3;
}

.cat-block .category img {
  width: 13px;
  padding-right: 5px;
  display: none;
}


.cat-block .category:hover img {
  display: inline;
}

.cat-block .category a {
  font-size: 16px;
  font-weight: 300;
  color: #3b3b3b;
  text-align: right;
  text-decoration: none;
}


.cat-block .category:hover {
  box-shadow: 0px 0px 21px 0px rgba(1, 2, 4, 0.25);
  background-color: rgba(255, 255, 255, 1);
}

.cat-block .category:active {
  background-color: rgba(255, 255, 255, 1);
}

.cat-block .category:nth-of-type(1) {
  border-radius: 10px 0 0 10px;
  padding-left: 14px;

}

.cat-block .category:nth-of-type(4) {
  border-radius: 0 10px 10px 0;
  padding-right: 14px;
}



#первый
#последующий
#следующий
за ним
#последний






    

Ответы

Ответ 1

@andrey-fedorov прав, сделать плавность с помощью css/display:none невозможно, это
можно сделать при помощи jQuery например. А вот если изменять ширину от 0 до заданной,
то с помощью css это сделать можно вот так:



body {
  font-family: "Roboto";
  font-weight: 100px;
}

.cat-block {
  position: relative;
  display: inline-block;
}

.cat-block .category {
  background-color: rgba(255, 255, 255, 0);
  padding: 3px 8px 3px 8px;
  box-shadow: 0px 0px 35px 0px rgba(1, 2, 4, 0.25);
  float: left;
  -webkit-transition: .2s ease-out;
  -o-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  transition: .2s ease-out;
  margin: 0;
  z-index: 3;
}

.cat-block .category img {
  width: 0;
  padding-right: 5px;
  transition: .3s;
}


.cat-block .category:hover img {
  width:13px
}

.cat-block .category a {
  font-size: 16px;
  font-weight: 300;
  color: #3b3b3b;
  text-align: right;
  text-decoration: none;
}


.cat-block .category:hover {
  box-shadow: 0px 0px 21px 0px rgba(1, 2, 4, 0.25);
  background-color: rgba(255, 255, 255, 1);
}

.cat-block .category:active {
  background-color: rgba(255, 255, 255, 1);
}

.cat-block .category:nth-of-type(1) {
  border-radius: 10px 0 0 10px;
  padding-left: 14px;

}

.cat-block .category:nth-of-type(4) {
  border-radius: 0 10px 10px 0;
  padding-right: 14px;
}



#первый
#последующий
#следующий
за ним
#последний





Ответ 2

Важно понимать, что есть свойства, которые не анимируются через transition. Прежде
всего это свойства со значениями в виде текста, например display: none. С другой стороны,
свойства имеющие численные значения, например, opacity: 1 являются анимируемыми.

Исходя из этого вам нужно так переделать свой код, чтобы появление иконки было задано
анимируемыми свойствами. Например можно задать отрицательный margin-left, а по наведению
мыши задавать ему нулевое значение. Тогда иконка будет как бы выезжать слева.

Надеюсь принцип понятен?

Трансформация поворота в SVG?

#css3 #svg #анимация #css_animation #transform

Столкнулся с непониманием, как сделать поворот определенной части сгруппированной
svg части объекта. Приведу пример 



.game_block {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.btn_gamePlay {
  width: 100vh;
  height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  transition: 0.2s all;
}

.st7 {
  fill: #70203c;
}

.st8 {
  fill: #ef447e;
  stroke: #5e112d;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}

.za_rightArm__one {}

.za_rightArm__two {
  transition: .2s linear;
  transform-origin: 100% 40px;
  transform: rotate(0deg);
}

.game_block:hover .za_rightArm__two {
  transition: .2s linear;
  transform: rotate(35deg);
}


  





Идея следующая. По наведению на область в которой находиться кнопка, SVG картинка
выбрасывает руку вверх, при выходе из области hover опускает с предварительной задержкой.
Пытаюсь понять, как в SVG задается transform-origin, но что-то пока не дошло. Пробовал
 читать но ясности не принесло. Как определить  

 вот эти вот точки объектов, а потом организовать правильный поворот. (Желательно
что б оно ещё и FF работало, а то постоянно мне там баги лезут)
    

Ответы

Ответ 1

Понял, свою ошибку. Можно сделать и без привлечения сторонних библиотек. Просто надо
правильно задавать контрольные точки и делать смещение 



.game_block {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.btn_gamePlay {
  width: 100vh;
  height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  transition: 0.2s all;
}

.st7 {
  fill: #70203c;
}

.st8 {
  fill: #ef447e;
  stroke: #5e112d;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}



.za_rightArm__one {
  transform-origin: 50px 100px;
  transition: .2s all;
  transform: translateX(0) translateY(0);
}

.game_block:hover .za_rightArm__one {
  transform-origin: 50px 100px;
 transition: .2s all;
  transform: translateX(-11px) translateY(-20px);
}

.za_rightArm__two {
  transform-origin: 50px 100px;
  transition: .2s all;
  transform: rotate(0deg) translateX(0) translateY(0);
}


.game_block:hover .za_rightArm__two {
  transform-origin: 50px 100px;
 transition: .2s all;
  transform: rotate(46deg) translateX(14px) translateY(-10px);
}


  



Ответ 2

Вариант очень сырой, выкладываю по предложению автора вопроса.
Пример будет доработан.  

Анимация начинается после клика по кнопке



.container {
width:75%;
height:75%;
}
.game_block {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.btn_gamePlay {
  width: 100vh;
  height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  transition: 0.2s all;
}

.st7 {
  fill: #70203c;
}

.st8 {
  fill: #ef447e;
  stroke: #5e112d;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}


   

Нужно сделать обводку при наведении

#html #css #анимация #transform

Есть у меня вот такая реализация, где при наведении плавно появляется нижний бордер,
а теперь нужно в таком стиле сделать весь прямоугольник 

Код, это все что слева



.order-row {
  display: flex;
  width: 50%;
  height: 84vh;
  margin-top: 1vh;
  background: url(../img/14days.jpg) no-repeat;
  background-size: cover;
}

.link {
  display: flex;
  margin: auto;
}

.link h2 {
  display: block;
  margin: auto;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
}

.link-order {
  width: 435px;
  height: 130px;
  background: rgba(255, 255, 255, 0.7);
}

.link-order h2::after {
  display: block;
  content: '';
  border-bottom: 1px solid #2d2d2d;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 450ms ease-in-out;
}

.link-order h2:hover::after {
  transform: scaleX(1);
  transform-origin: 0% 50%;
}

  

    
Под заказ за 14 дней
  






    

Ответы

Ответ 1

Лучший вариант такой анимации без использования SVG будет выглядеть так:



* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-transform: uppercase;
}

a {
  position: relative;
  color: #333;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  display: block;
  text-decoration: none;
  background: none;
  border: 0;
  -webkit-box-shadow: inset 0 0 0 2px transparent;
          box-shadow: inset 0 0 0 2px transparent;
  padding: 20px 40px;
}

a:after,
a:before {
  content: '';
  display: block;
  position: absolute;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid transparent;
  width: 0;
  height: 0;
}

a:after {
  top: 0;
  left: 0;
  -webkit-transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height
0.2s ease-in 0.4s;
  -o-transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s
ease-in 0.4s;
  transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s
ease-in 0.4s;
}

a:before {
  bottom: 0;
  right: 0;
  -webkit-transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height
0.2s ease-in;
  -o-transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s
ease-in;
  transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s
ease-in;
}

a:hover:after,
a:hover:before {
  width: 100%;
  height: 100%;
}

a:hover:after {
  border-top-color: rgba(0, 0, 0, .3);
  border-right-color: rgba(0, 0, 0, .3);
  -webkit-transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
  -o-transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
  transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
}

a:hover:before {
  border-bottom-color: rgba(0, 0, 0, .3);
  border-left-color: rgba(0, 0, 0, .3);
  -webkit-transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height
0.2s ease-out 0.6s;
  -o-transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height
0.2s ease-out 0.6s;
  transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s
ease-out 0.6s;
}
Сделать заказ


Ответ 2

Есть два варианта, первый:



button {
  padding: .5em 1em;
  border: none;
  background: lightblue;
  position: relative;
}

button:after {
  position: absolute;
  left: 0;
  top: 0;
  content: ' ';
  width: 100%;
  height: 100%;
  border: 1px solid;
  border-right-width: 0;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform .3s, border .1s .3s;
  box-sizing: border-box;
}

button:hover:after {
  transform: scaleX(1);
  border-right-width: 1px;
}





И второй:



.rect {
  fill: lightblue;
  stroke: black;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1s;
}

.rect:hover {
  stroke-dashoffset: 0;
}



Ответ 3

А я умею clip-path, поэтому анимируются все 4 стороны. Но кроссбораузерность так себе.



div {
  float: left;
  line-height: 2em;
  padding: 0 2em;
  background: silver;
  
  border: 2px solid blue;
  transition: clip-path 1s linear;
  
  clip-path: polygon(
    2px 0,
    2px 0, 2px 2px, /* moving */
    100% 2px,
    100% 2px, calc(100% - 2px) 2px, /* moving */
    calc(100% - 2px) 100%,
    calc(100% - 2px) 100%, calc(100% - 2px) calc(100% - 2px), /* moving */
    0 calc(100% - 2px),
    0 calc(100% - 2px), 2px calc(100% - 2px) /* moving */
  );
}

div:hover {
  clip-path: polygon(
    2px 0,
    100% 0, 100% 2px, /* moving */
    100% 2px,
    100% 100%, calc(100% - 2px) 100%, /* moving */
    calc(100% - 2px) 100%,
    0 100%, 0 calc(100% - 2px), /* moving */
    0 calc(100% - 2px),
    0 0, 2px 0 /* moving */
  );
}
Hover me

Off-canvas меню

#меню #transition #javascript #transform #css

Добрый вечер!
На досуге занимаюсь разработкой собственного сайта и возникли трудности в создании
off-canvas меню. Структура страницы состоит из трёх блоков - "шапка", меню и содержимое.
Изначально меню видно. Ширина меню составляет 20% от ширины контейнера, ширина блока
с содержимым - 80%.
Упрощённо, задача заключается в том, что при нажатии на кнопку "Меню", меню плавно
смещается за край контейнера. В свою очередь блок содержимого плавно растягивается
до 100% от ширины контейнера.
При повторном нажатии на кнопку "Меню", слева плавно выходит меню, которое занимает
20% от ширины контейнера. В свою очередь ширина блока с содержимым плавно уменьшается
до 80%. Именно уменьшается, а не частично смещается за край контейнера. (именно это
заставило писать своё решение).
Схематически это выглядит так:



Появление/исчезновение меню я достиг за счёт css свойства "transform: translate3d(-100%,
0, 0)". Проблема в том, что при смещении меню за край контейнера, блок содержимого
хоть и растягивается до 100%, но "падает" вниз из за нехватки места. Понимаю, что за
меню остались те самые 20% от ширины контейнера.
Как быть? 
Буду очень Вам благодарен за помощь!
Код:
HTML:

   

      Menu
   
   

      Nav
   
   

      Main
   


CSS:
.container {
    max-width: 75em;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
}

#header {
    width: 100%;
}

#nav {
    float: left;
    width: 20%;
}
#main {
    float: right;
    width: 80%;
    transition: transform 500ms ease 0s;
    background: gray;
}
#nav {
    background: green;
    transform: translate3d(-100%, 0, 0);
    transition: transform 500ms ease 0s;
}
#nav.visible {
    transform: none;
}

#main.large {
    width: 100%;
}

JS:
var nav = $("#nav");

$('#show-nav').click(function(e) {
    e.preventDefault();

    if (nav.hasClass('visible')) {
        nav.removeClass('visible');
        $("#main").addClass('large');
    } else {
        nav.addClass('visible');
        $("#main").removeClass('large');
    }
});
    

Ответы

Ответ 1

js:
$('#show-nav').click(function(e) {
    e.preventDefault();
    $(this).parents('.container').toggleClass('large');
});

css:
#main {
    float: right;
    width: 80%;
    transition: all 0.2s ease-in-out;
    background: gray;
}
#nav {
    background: green;
    transition: all 0.2s ease-in-out;
    float: left;
    width: 20%;
}

.container.large #main {
    width: 100%;
}

.container.large #nav {
    width:0%;
}

Пример: http://jsfiddle.net/LcNJ4/1/
Аж приятно отвечать на такой понятно расписанный вопрос, спасибо!)

как изогнуть изображение на bitmap

#android #bitmap #transform #матрицы

Можно ли деформировать изображение на bitmap , чтобы результат выглядел примерно так:



Методы матрицы (например setPolyToPoly() ) позволяют только растягивать и скашивать
изображение , но не изгибать
    

Ответы

Ответ 1

Оказывается у Canvas есть методы drawBitmapMesh() и drawVertices() , которые делают
именно то что нужно:

Баг при использовании CSS-свойства transform

#css #transform

При использовании CSS-свойства transfrom наблюдается пробел между HTML-элементами.

Что это вообще за пробел и как его можно красиво убрать?

Фигура тут не имеет значение. Важно именно решение проблемы без JS Canvas.

http://jsfiddle.net/g2w6y7fm/1



.top-left {
  position: absolute;
  width: 140px;
  height: 120px;
  top: 45px;
  left: 50px;
  background-color: red;
  transform-origin: top right;
  transform: rotate(-30deg);
}
.right {
  position: absolute;
  left: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-top: 120px solid red;
  border-right: 70px solid transparent;
}
.left {
  position: absolute;
  right: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-top: 120px solid red;
  border-left: 70px solid transparent;
}

  

  





    

Ответы

Ответ 1

К .top-left добавляем backface-visibility: hidden.



.top-left {
  backface-visibility: hidden;
  position: absolute;
  width: 140px;
  height: 120px;
  top: 45px;
  left: 50px;
  background-color: red;
  transform-origin: top right;
  transform: rotate(-30deg);
}
.right {
  position: absolute;
  left: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-top: 120px solid red;
  border-right: 70px solid transparent;
}
.left {
  position: absolute;
  right: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-top: 120px solid red;
  border-left: 70px solid transparent;
}

  

  






http://jsfiddle.net/yw066stw/


Ответ 2

2 вариант - добавить translate3d( 0, 0, 1px);



.top-left {  
  position: absolute;
  width: 140px;
  height: 120px;
  top: 45px;
  left: 50px;
  background-color: red;
  transform-origin: top right;  
  transform: rotate(-30deg) translate3d( 0, 0, 1px);
}

.right {
  position: absolute;
  left: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-top: 120px solid red;
  border-right: 70px solid transparent;
}

.left {
  position: absolute;
  right: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-top: 120px solid red;
  border-left: 70px solid transparent;
}

  

  

Как разобрать matrix на scale, rotate, translate, skew?

#javascript #css #css3 #css_animation #transform

Дело такое, getComputedStyle(element).getPropertyValue("transform") возвращает matrix(a,
c, b, d, tx, ty). C translate всё вроде бы просто: translateX = tx, translateY = ty.
А вот как вытащить scale, rotate, skew я немного не понимаю потому как во первых в
rotate и scale должны быть градусы, во вторых:
вроде как skewX = b, skewY = c, а scaleX = a, scaleY = d, но при этом что бы повернуть
элемент в матрице a = cos(x), b = sin(x), c = -sin(x), d cos(x).
Вообщем из набора параметров matrix я бы ещё составил а вот из matrix вытащить параметры
вообще не понимаю как. Подскажите пожалуйста как перевести матрицу в понятный простому
человеку язык или подскажите как можно получить свойство transform не в matrix, а в
scale, rotate, translate, skew?
    

Ответы

Ответ 1

В черновике спецификации описано какие значения, что означают.

Трансформации осуществляются с помощью матрицы трансформаций, в общем случае (3D)
матрица 4х4



Матрица, которую вы получаете matrix(a, c, b, d, tx, ty) представляется в следующем виде:



Как вы правильно отметили:  tx, ty - отвечают за перемещение.

За масштабирование отвечают значения лежащий на главной диагонали, в нашем случае
это a,d, при это a - масштабирование по ширине, d - по высоте.

c,b - отвечают за наклон

и все вместе a,b,c,d - за поворот.

Подробнее можно увидеть на картинке



Такие преобразования называются Афинными, подробнее о них можно узнать:

Wikipedia: Афинные преобразования
Аффинное преобразование и его матричное представление

Почему анимация работает не так, как я написал?

#html #css #css3 #css_animation #transform

Почему анимация работает не так, как я написал?

Суть анимации:
 Красный блок уходит влево на 140px, после он поворачивается на 720 градусов. А в
итоге получается то, что он просто 2 раза уходит влево.

Код: 



.d {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #F44336;
}

#container {
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
}


@keyframes transformRed {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  70% {
    transform: translateX(0) rotate(0deg);  
  }
  80% {
    transform: translateX(-140px);
  }
  85% {
    transform: rotate(720deg);
  }
  100% {
     transform: translateX(-140px) rotate(720deg);
  }
}
 
#red {
  animation: transformRed 2.5s ease-out 0s 1 normal;
}

    






Код на jsfiddle: https://jsfiddle.net/deloop_/t6wg275j/1/
    

Ответы

Ответ 1

Поверь, он работает так, как Вы написали.  

Идем сначала:  


Есть функция под названием transformRed 
Вы задали animation-duration: 2.5s (время исполнения)
Значение ease-out для animation-timing-function  (плавность
исполнения)
0 и 1 - неизвестно
И значение normal для animation-direction (направление)


Для того, чтобы красный блок запомнил свою последнюю позицию, Вам нужен forwards
animation-fill-mode: forwards;  

Готовый код:



.d {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #F44336;
}

#container {
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
}

@keyframes transformRed {
  0% {
    transform: translateX(0) rotate(0);
  }
  80% {
    transform: translateX(-140px) rotate(0);
  }
  100% {
    transform: translateX(-140px) rotate(360deg); // У Вас стояло 720, но я поставил
360 для примера
  }
}

#red {
  animation: transformRed ease-out 3s forwards; // Время можно изменить по желанию
}

  




Ответ 2

Попробуйте так:



.d {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #F44336;
}

#container {
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
}

@keyframes transformRed {
  0% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(-140px) rotate(0deg);
  }
  50% {
    transform: translateX(-140px) rotate(720deg);
  }
  100% {
    transform: translateX(0px);
  }
}

#red {
  animation: transformRed 2.5s ease-out 0s 1 normal;
}

  

Вращение блока при движении мышкой

#javascript #jquery #css #transform

Нужна анимация как на сайте https://openai.com/
Карточка сверху в правом блоке и ряд внизу.

Кратко:
При движении мыши над блоком-карточкой, сторона над которой находится мышь как бы
отдалялась

Понятно, что это transform rotate X,Y,Z. Но как рассчитываются координаты, может
это плагин какой-то? 
Но лучше реализацию без плагина на jQuery.
    

Ответы

Ответ 1

Можно привязать свойство rotateX и rotateY к CSS-переменным и на лету менять их значение
через JS. Чувствительность к движению мыши задается коэффициентом 30, чем он выше,
тем менее картинка реагирует на движение мыши.



const img = document.querySelector("img");

document.addEventListener("mousemove", function (e) {
  move (e.clientX, e.clientY);
});

function move (x, y) {
  let wh = window.innerHeight / 2,
  ww = window.innerWidth / 2;
  
  document.body.style.setProperty('--mouseX', (x - ww) / 30 + "deg");
  document.body.style.setProperty('--mouseY', (y - wh) / 30 + "deg");
}
:root {
  --mouseX: 0deg;
  --mouseY: 0deg;
}

body {
  display: flex;
  min-height: 100vh;
}

img {
  width: 50vmin;
  height: 50vmin;
  margin: auto;
  transform: rotateX(calc(var(--mouseY))) rotateY(calc(var(--mouseX)));
}



Ответ 2

Получилось так. Особо не думал над названиями переменных. Главное работает



let $img = $('.card');

function move(x, y) {
  // обертка с доп свойствами
  $img.addClass('card-active');

  // центр карточки
  let xser = $img.offset().left + $img.width() / 2;
  let yser = $img.offset().top + $img.height() / 2;

  // координаты мыши относительно центра карточки
  let otnX = x - xser;
  let otnY = y - yser;

  // вычисляем % - на каком расстоянии мышь от середины до края, центр = 0%
  let raznX = otnX / $img.width() * 100 * 2;
  let raznY = otnY / $img.height() * 100 * 2;

  // на сколько градусов нужно повернуть (100% = 6deg)
  let trX = raznY / 100 * 6 * -1;
  let trY = raznX / 100 * 6;

  // окруление
  trX = Math.round(trX * 1000) / 1000;
  trY = Math.round(trY * 1000) / 1000;

  // в css
  $img.css('transform', 'rotateY(' + trY + 'deg) rotateX(' + trX + 'deg) rotateZ(0deg)
scale(1.05)');
}

function resetTransform() {
  $img.removeClass('card-active');
  $img.css('transform', 'rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1)');
}

$img.mousemove(function(e) {
    move(e.pageX, e.pageY);
  })
  .mouseout(function(e) {
    resetTransform();
  });
.card-wrapper {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.card {
  background: linear-gradient(45deg, #1e5799 0%, #bab523 19%, #210611 37%, #e23424
66%, #28fcdc 84%, #764682 100%);
  display: block;
  position: relative;
  width: 220px;
  height: 320px;
  margin: 50px auto;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.card img {
  width: 100%;
  height: 100%;
}

.card img:before {
  position: absolute;
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #000;
  left: 50%;
  top: 50%;
}

.card-active {
  transition: transform .4s cubic-bezier(0, 0, .2, 1), filter .15s cubic-bezier(0,
0, .2, 1);
}


  


  



Ответ 3

Этот эффект называется что-то вроде Parallax effect for cards.

Один из примеров реализации — Create an Apple TV Poster Parallax Effect in CSS3 &
jQuery, но с использованием jQuery.

Ребята с https://openai.com/ всё на чистом JavaScript реализацию написали. Также
с использованием CSS анимации само собой (для переходов). Но они JS обфусцировали.
Может быть вы или кто-то другой захочет реверс-инжиниринг провести.

HTML-CSS: как избавиться от контура при трансформации блока?

#html #css #transform

Задача - сверстать кроссбраузерно вот такого вида слайдер. Применяю трансформацию
+ псевдоэлементы. Вроде бы, всё просто, но откуда-то появляется контур блока-обёртки:



.wrapper {
  width: 250px;
  height: 180px;
  margin: 50px;
  border-radius: 30px 20px;
  transform: skew(10deg, 5deg);
  position: relative;
  overflow: hidden;
}
.img {
  width: 150%;
  transform: translate(-20px, -20px) skew(-10deg, -5deg);
}
.wrapper:before {
  content: '';
  position: absolute;
  left: 220px;
  display: block;
  width: 60px;
  height: 200px;
  border-radius: 20px;
  background-color: white;
  transform: skew(-20deg, -10deg);
  z-index: 1;
}

.wrapper:after {
  content: '';
  position: absolute;
  top: 160px;
  display: block;
  width: 250px;
  height: 60px;
  border-radius: 20px;
  background-color: white;
  transform: skew(-20deg, -10deg);
}
.arrow {
  position: absolute;
  width: 30px;
  height: 40px;
  background-color: red;
  z-index: 2;
  top: 135px;
  left: 180px;
  color: white;
  transform: rotate(45deg) skew(0, 0);
  border-radius: 5px;
  cursor: pointer;
}
.arrow div {
  font-weight: bold;
  padding: 10px 0 0 7px;
  transform: rotate(-45deg);
}

  
  
>>






Что это за контур и как от него избавиться?

И, возможно, есть какой-то другой способ кроссбраузерно сверстать такой слайдер?
    

Ответы

Ответ 1

Добавляем картинке translateZ(0) и больше нет никаких контуров:



.wrapper {
  width: 250px;
  height: 180px;
  margin: 50px;
  border-radius: 30px 20px;
  transform: skew(10deg, 5deg);
  position: relative;
  overflow: hidden;
}
.img {
  width: 150%;
  transform: translate(-20px, -20px) skew(-10deg, -5deg) translateZ(0);
}
.wrapper:before {
  content: '';
  position: absolute;
  left: 220px;
  display: block;
  width: 60px;
  height: 200px;
  border-radius: 20px;
  background-color: white;
  transform: skew(-20deg, -10deg);
  z-index: 1;
}

.wrapper:after {
  content: '';
  position: absolute;
  top: 160px;
  display: block;
  width: 250px;
  height: 60px;
  border-radius: 20px;
  background-color: white;
  transform: skew(-20deg, -10deg);
}
.arrow {
  position: absolute;
  width: 30px;
  height: 40px;
  background-color: red;
  z-index: 2;
  top: 135px;
  left: 180px;
  color: white;
  transform: rotate(45deg) skew(0, 0);
  border-radius: 5px;
  cursor: pointer;
}
.arrow div {
  font-weight: bold;
  padding: 10px 0 0 7px;
  transform: rotate(-45deg);
}

  
  
>>

Плавное катание и передвижение шара

Есть div , делаю эффект будто он катиться. Делаю с помощью translate и rotate.
Как достичь плавности и большей реальности в конце пути шара, что бы он плавно остановился?
И как просчитывать количество градусов, так как передвижение по оси x всегда на разные расстояние будет?
var deg = 0; var append = function() { deg = deg + 90; $("#telo").css({ "-moz-transform": " translate(350px,0) rotate(" + deg + "deg) ", "-ms-transform": "translate(350px,0) rotate(" + deg + "deg) ", "-webkit-transform": "translate(350px,0) rotate(" + deg + "deg) ", "-o-transform:": "translate(350px,0) rotate(" + deg + "deg) ", "transform": " translate(350px,0) rotate(" + deg + "deg) " }); $("#t").append(" |" + deg + "| ") } var interval = 0; $("#btn0").click(function() { interval = setInterval(append, 100); }) $("#btn1").click(function() { clearInterval(interval); }) div#telo { /*transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);*/ position: absolute; width: 95px; height: 95px; background-color: #22dd66; bottom: 100px; margin-left: 25px; transition: .7s ease; -webkit-transition: .7s ease; -moz-transition: .7s ease; -o-transition: .7s ease; border-radius: 60px; text-align: center; color: white; } .k { width: 10px; height: 20px; display: block; margin: 0 auto; background: #333; } div#planka { position: absolute; width: 350px; height: 3px; background-color: red; bottom: 100px; margin-left: 50px; z-index: 1; }

1

Ответ

Расчет градусов и расстояний
Диаметр шара - 95px. За один оборот шара его центр перемещается на длину окружности с тем же диаметром: 3,14 х 95px = 298,3px.
Один оборот - это поворот на 360deg. Поэтому рабочее уравнение:
alpha / 360 = x / 298,3
Если задан поворот на alpha градусов, то за время поворота шар прокатится на alpha * 298,3 / 360 пикселей. Если задано расстояние в x пикселей, то за время пути шар повернётся на x * 360 / 298,3 градусов.
Плавность хода
Думаю, что лучший способ - использовать в качестве transition-timing-function не linear, а ease-in на старте и ease-out на остановке.

Плавное появление элемента из display:none в inline

Интересует такая штука – как заставить блок расширяться плавно при наведении, то есть иконка становится видимой по мере того, как в течение анимации до конца выезжает кнопка справа?
body { font-family: "Roboto"; font-weight: 100px; } .cat-block { position: relative; display: inline-block; } .cat-block .category { background-color: rgba(255, 255, 255, 0); padding: 3px 8px 3px 8px; box-shadow: 0px 0px 35px 0px rgba(1, 2, 4, 0.25); float: left; -webkit-transition: .2s ease-out; -o-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; margin: 0; z-index: 3; } .cat-block .category img { width: 13px; padding-right: 5px; display: none; } .cat-block .category:hover img { display: inline; } .cat-block .category a { font-size: 16px; font-weight: 300; color: #3b3b3b; text-align: right; text-decoration: none; } .cat-block .category:hover { box-shadow: 0px 0px 21px 0px rgba(1, 2, 4, 0.25); background-color: rgba(255, 255, 255, 1); } .cat-block .category:active { background-color: rgba(255, 255, 255, 1); } .cat-block .category:nth-of-type(1) { border-radius: 10px 0 0 10px; padding-left: 14px; } .cat-block .category:nth-of-type(4) { border-radius: 0 10px 10px 0; padding-right: 14px; }

#первый

#последующий

#следующий за ним

#последний

Ответ

@andrey-fedorov прав, сделать плавность с помощью css/display:none невозможно, это можно сделать при помощи jQuery например. А вот если изменять ширину от 0 до заданной, то с помощью css это сделать можно вот так:
body { font-family: "Roboto"; font-weight: 100px; } .cat-block { position: relative; display: inline-block; } .cat-block .category { background-color: rgba(255, 255, 255, 0); padding: 3px 8px 3px 8px; box-shadow: 0px 0px 35px 0px rgba(1, 2, 4, 0.25); float: left; -webkit-transition: .2s ease-out; -o-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; margin: 0; z-index: 3; } .cat-block .category img { width: 0; padding-right: 5px; transition: .3s; } .cat-block .category:hover img { width:13px } .cat-block .category a { font-size: 16px; font-weight: 300; color: #3b3b3b; text-align: right; text-decoration: none; } .cat-block .category:hover { box-shadow: 0px 0px 21px 0px rgba(1, 2, 4, 0.25); background-color: rgba(255, 255, 255, 1); } .cat-block .category:active { background-color: rgba(255, 255, 255, 1); } .cat-block .category:nth-of-type(1) { border-radius: 10px 0 0 10px; padding-left: 14px; } .cat-block .category:nth-of-type(4) { border-radius: 0 10px 10px 0; padding-right: 14px; }

#первый

#последующий

#следующий за ним

#последний

Нужно сделать обводку при наведении

Есть у меня вот такая реализация, где при наведении плавно появляется нижний бордер, а теперь нужно в таком стиле сделать весь прямоугольник
Код, это все что слева
.order-row { display: flex; width: 50%; height: 84vh; margin-top: 1vh; background: url(../img/14days.jpg) no-repeat; background-size: cover; } .link { display: flex; margin: auto; } .link h2 { display: block; margin: auto; text-align: center; font-size: 30px; font-weight: 400; } .link-order { width: 435px; height: 130px; background: rgba(255, 255, 255, 0.7); } .link-order h2::after { display: block; content: ''; border-bottom: 1px solid #2d2d2d; transform: scaleX(0); transform-origin: 100% 50%; transition: transform 450ms ease-in-out; } .link-order h2:hover::after { transform: scaleX(1); transform-origin: 0% 50%; }

Под заказ за 14 дней

Ответ

Лучший вариант такой анимации без использования SVG будет выглядеть так:
* { -webkit-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; padding: 0; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; } a { position: relative; color: #333; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; display: block; text-decoration: none; background: none; border: 0; -webkit-box-shadow: inset 0 0 0 2px transparent; box-shadow: inset 0 0 0 2px transparent; padding: 20px 40px; } a:after, a:before { content: ''; display: block; position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid transparent; width: 0; height: 0; } a:after { top: 0; left: 0; -webkit-transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s; -o-transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s; transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s; } a:before { bottom: 0; right: 0; -webkit-transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in; -o-transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in; transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in; } a:hover:after, a:hover:before { width: 100%; height: 100%; } a:hover:after { border-top-color: rgba(0, 0, 0, .3); border-right-color: rgba(0, 0, 0, .3); -webkit-transition: width 0.2s ease-out, height 0.2s ease-out 0.2s; -o-transition: width 0.2s ease-out, height 0.2s ease-out 0.2s; transition: width 0.2s ease-out, height 0.2s ease-out 0.2s; } a:hover:before { border-bottom-color: rgba(0, 0, 0, .3); border-left-color: rgba(0, 0, 0, .3); -webkit-transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s; -o-transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s; transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s; } Сделать заказ

Off-canvas меню

Добрый вечер! На досуге занимаюсь разработкой собственного сайта и возникли трудности в создании off-canvas меню. Структура страницы состоит из трёх блоков - "шапка", меню и содержимое. Изначально меню видно. Ширина меню составляет 20% от ширины контейнера, ширина блока с содержимым - 80%. Упрощённо, задача заключается в том, что при нажатии на кнопку "Меню", меню плавно смещается за край контейнера. В свою очередь блок содержимого плавно растягивается до 100% от ширины контейнера. При повторном нажатии на кнопку "Меню", слева плавно выходит меню, которое занимает 20% от ширины контейнера. В свою очередь ширина блока с содержимым плавно уменьшается до 80%. Именно уменьшается, а не частично смещается за край контейнера. (именно это заставило писать своё решение). Схематически это выглядит так: Появление/исчезновение меню я достиг за счёт css свойства "transform: translate3d(-100%, 0, 0)". Проблема в том, что при смещении меню за край контейнера, блок содержимого хоть и растягивается до 100%, но "падает" вниз из за нехватки места. Понимаю, что за меню остались те самые 20% от ширины контейнера. Как быть? Буду очень Вам благодарен за помощь! Код: HTML:

Menu

Nav

Main

CSS: .container { max-width: 75em; margin-left: auto; margin-right: auto; position: relative; overflow: hidden; }
#header { width: 100%; }
#nav { float: left; width: 20%; } #main { float: right; width: 80%; transition: transform 500ms ease 0s; background: gray; } #nav { background: green; transform: translate3d(-100%, 0, 0); transition: transform 500ms ease 0s; } #nav.visible { transform: none; }
#main.large { width: 100%; } JS: var nav = $("#nav");
$('#show-nav').click(function(e) { e.preventDefault();
if (nav.hasClass('visible')) { nav.removeClass('visible'); $("#main").addClass('large'); } else { nav.addClass('visible'); $("#main").removeClass('large'); } });

Ответ

js: $('#show-nav').click(function(e) { e.preventDefault(); $(this).parents('.container').toggleClass('large'); }); css: #main { float: right; width: 80%; transition: all 0.2s ease-in-out; background: gray; } #nav { background: green; transition: all 0.2s ease-in-out; float: left; width: 20%; }
.container.large #main { width: 100%; }
.container.large #nav { width:0%; } Пример: http://jsfiddle.net/LcNJ4/1/ Аж приятно отвечать на такой понятно расписанный вопрос, спасибо!)

как изогнуть изображение на bitmap

Можно ли деформировать изображение на bitmap , чтобы результат выглядел примерно так:

Методы матрицы (например setPolyToPoly() ) позволяют только растягивать и скашивать изображение , но не изгибать

Ответ

Оказывается у Canvas есть методы drawBitmapMesh() и drawVertices() , которые делают именно то что нужно:

Как разобрать matrix на scale, rotate, translate, skew?

Дело такое, getComputedStyle(element).getPropertyValue("transform") возвращает matrix(a, c, b, d, tx, ty). C translate всё вроде бы просто: translateX = tx, translateY = ty. А вот как вытащить scale, rotate, skew я немного не понимаю потому как во первых в rotate и scale должны быть градусы, во вторых: вроде как skewX = b, skewY = c, а scaleX = a, scaleY = d, но при этом что бы повернуть элемент в матрице a = cos(x), b = sin(x), c = -sin(x), d cos(x). Вообщем из набора параметров matrix я бы ещё составил а вот из matrix вытащить параметры вообще не понимаю как. Подскажите пожалуйста как перевести матрицу в понятный простому человеку язык или подскажите как можно получить свойство transform не в matrix, а в scale, rotate, translate, skew?

Ответ

В черновике спецификации описано какие значения, что означают.
Трансформации осуществляются с помощью матрицы трансформаций, в общем случае (3D) матрица 4х4

Матрица, которую вы получаете matrix(a, c, b, d, tx, ty) представляется в следующем виде:

Как вы правильно отметили: tx, ty - отвечают за перемещение.
За масштабирование отвечают значения лежащий на главной диагонали, в нашем случае это a,d, при это a - масштабирование по ширине, d - по высоте.
c,b - отвечают за наклон
и все вместе a,b,c,d - за поворот.
Подробнее можно увидеть на картинке

Такие преобразования называются Афинными, подробнее о них можно узнать:
Wikipedia: Афинные преобразования Аффинное преобразование и его матричное представление