CSS3 matrix3d ​​прямоугольник в преобразование трапеции - PullRequest
Новая
       12

CSS3 matrix3d ​​прямоугольник в преобразование трапеции

8 голосов
/ 10 февраля 2011

Я пытаюсь использовать поддержку webkit для CSS3 transform: matrix3d(<matrix>), чтобы создать эффект «падающей карты».(Единственная цель для вывода этого - Chrome)

Конечный эффект должен переходить через 4 этапа ниже и заканчиваться просто горизонтальной линией:

enter image description here

Вот CSS, который у меня сейчас есть: 

#test { 
            margin: auto auto;
            height: 200px;
            width: 200px;
            border:1px solid black;
            background-color: lightblue;
            -webkit-perspective: 1000; 
            -webkit-transform-origin: 50% 100%;
            -webkit-transform-style: preserve-3d;
            -webkit-animation-name: flip-card;        
            -webkit-animation-duration: 1s;        
            -webkit-animation-iteration-count: infinite;        
            -webkit-animation-timing-function: linear;
            -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
        }
         @-webkit-keyframes flip-card {
            0%    {-webkit-transform: ;}
            100%    {-webkit-transform:
                        matrix3d(1, 0, 0, 0,
                                 0, 1, 0, 0, 
                                 0, 0, 0, 0, 
                                 0, 0, 0.001, 1);}
        }

И HTML-код прост для тестирования: 

<body>
   <div id="test">this div should fall forward...</div>
</body>

Matrix3d ​​в ​​приведенном выше примере основан на чтении этого ТАвопрос , но он дает уменьшающийся квадрат, который переворачивается вокруг оси x, определяемой нижней частью начального блока.

Я понимаю, что матрица CSS 2d может создавать прямоугольники и параллелограммы только путем преобразования блокаи что неправильные формы нуждаются в операции преобразования matrix3d ​​( эта была полезна для обновления моей линейной алгебры с угасанием!), но я, похоже, могу только создавать прямоугольники и параллелограммы.

* 1022осмотрел некоторые вопросы SO, помеченные matrix и transformation.Большинство из них не основаны на CSS, и я не смог получить нужное преобразование.

Ответы [ 3 ]

9 голосов
/ 10 февраля 2011

-webkit -спектива еще не работает в Chrome (только Safari), поэтому это не будет работать (попробуйте свой код в Safari).Кроме того, 3D-преобразования в Chrome, в общем, немного сомнительны и не очень хорошо сочетаются с градиентами.

Также rotate3d (1, 0, 0, 90deg) работает так же, как матрица, чтобы выполнить то, что вы делаете.Матричная нотация - это всего лишь краткий способ объединения трехмерного поворота, перекоса, перемещения и начала координат в один массив.Так как вы вращаетесь только вокруг оси x, вам не нужно переходить к этим длинам. 

webkit-transform: perspective(800) rotate3d(1, 0, 0, -90deg)

Это именно то, что вам нужно.

Обновление: вот ссылка на jsfiddle с точно то, что вы ищете, работает как в Chrome, так и в Safari.Обратите внимание, что важно указать, что источник преобразования для отражения совпадает с источником для перспективы.Исходная точка Webkit-перспективы указывает, где находится «камера» в трехмерном пространстве относительно любых 3d-преобразований, и легко получить неинтуитивные результаты, если вы не будете осторожны.

2-е обновление: теперь перспектива поддерживается во всех браузерах ребер(хотя сглаживание в Firefox мало что может порекомендовать (и, очевидно, нуждается в -moz))

3-е обновление: обновлена ​​скрипта для кросс-браузера для Firefox, IE и без префиксов.

3 голосов
/ 18 февраля 2011

Я читал спецификацию CSS-перехода, когда заметил, что ширина границы анимируемая , и вы можете подделывать трапеции, используя ширину границы.Это означает, что вы можете подделать падающие карты в Chrome, Opera и FF4! 

#stage {
  margin-top: 200px;
  position: relative;
}

#trapezoid {
    position: absolute;
    bottom: 0;
    border: solid 1px #fff;
    border-bottom: solid 200px #c00;
    width: 200px;
    -webkit-transition: all ease 1s;

}

#stage:hover #trapezoid {
  border: solid 50px #fff;  
  border-bottom: solid 20px #f11;
  width: 100px;

}

Конечно, это имеет серьезные предостережения: в вашем примере карта падает вперед, я пытался, но кажется, что это невозможноэта техника.Любой контент внутри фигуры не будет преобразован, это просто форма карты.О, и форма карты не может иметь границ.Основные недостатки, которые ограничивают его применение в реальной жизни.

Тем не менее, это довольно круто!Поиграйте с ним здесь: http://jsfiddle.net/mxgAu/

0 голосов
/ 21 февраля 2012

Если вы используете IE10, то решение может быть: 

.up{
    -ms-transform-origin: 50% 100%;
    -ms-transform: perspective(100px) rotateX(7deg);
}

.down{
    -ms-transform-origin: 50% 0%;
    -ms-transform: perspective(100px) rotateX(-7deg) scale(1);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...