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

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

Конечного эффект должен переходить через 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>

Матрица 3d в приведенном выше примере была основана на чтении this SO question, но она создает сокращающийся квадрат, который переворачивается вокруг оси x, определяемой нижней частью исходного блока.

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

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

источник

2011-02-10 beggs

Я создал инструмент возиться со значениями преобразования CSS здесь: http://www.duopixel.com/ stack/webkitmatrix /, но, боюсь, я не могу создать трапецию с Chrome. Попробуйте. – Duopixel

@Duopixel: это отличный инструмент. Я могу сделать трапецию в Safari ... но перекосил по оси Y, а не по оси X, перемещая ползунок Row-1, Column4 (верхний правый слайдер). В Chrome тот же слайдер создает параллелограмм. Я понимаю, что я должен перемещать ползунок Row-4, Column-3 для создания параллелограмма по оси X, но это не влияет на Safari или Chrome. – beggs

Эта скрипка [CoffeeScript] (http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/#cp_embed_ifnqH) может быть полезна. На странице блога, на которой он встроен, есть и полезные объяснения. – mbomb007

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

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

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

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

Update: Вот link to a jsfiddle с точно то, что вы ищете, который работает как в хроме и сафари. Обратите внимание, что важно указать, что происхождение преобразования для флип совпадает с началом для перспективы. Перспектива Webkit-перспективы определяет, где «камера» находится в 3D-пространстве относительно любых 3D-преобразований, и легко получить неинтуитивные результаты, если вы не будете осторожны.

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

третьего обновление: Обновлена скрипку для кросса-браузера для Firefox, IE и unprefixed.

источник

2011-02-10 16:11:56

Интересно, я использовал rotateX(), но он не обеспечивает перспективу, что объект падает вперед. Я добавил различные параметры перспективы и ключевые кадры, но никогда не мог получить эффект «3D». Я попробую Safari и посмотрю, что по-другому. – beggs

Я пробовал изменения перспективы в Safari 5.0.3 (windows), и это не влияет. В инструменте, о котором @Duopixel упомянул в своем комментарии, я не могу получить трапецию X-оси, только одну ось Y в Safari, в то время как Chrome будет производить параллелограмм по оси Y. Похоже, что ответ «невозможно». – beggs

Я читал спецификацию перехода CSS, когда я заметил, что ширина границы равна animatable, и вы можете подделывать трапеции с использованием ширины границ. Это означает, что вы можете подделывать падающие карты в 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/

источник

2011-02-18 06:28:31 Duopixel

Но вы не смогли бы что-либо вставить в него. –

Да, но не без какого-то обмана. После написания этого ответа я обнаружил, что уже есть плагин jQuery, который делает это: http://lab.smashup.it/flip/. – Duopixel

О, дерьмо! 3D Flipping без CSS3 3D! http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/fx/tests/test_flip.html –

Если вы используете 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); 
}

источник

2012-02-21 13:59:58 frantisek

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

ответ

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

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