Кто-нибудь знает, как я могу обнаружить поддержку transform: translate3d(x,y,z)?
Моя проблема в том, что я хочу использовать translate3d в браузерах, где он поддерживается, потому что он имеет тенденцию использовать аппаратное ускорение и, следовательно, более плавный для анимации, а затем возвращается к translate, где его нет.
Отметьте это решение.
Он основан на том, что если браузер поддерживает преобразования, значение
window.getComputedStyle(el).getPropertyValue('transform')
будет строкой, содержащей матрицу преобразования, когда к элементу el применяется 3D-преобразование. В противном случае это будет undefined или строка 'none', как в случае с Opera 12.02.
Он работает во всех основных браузерах.
Код:
function has3d() {
if (!window.getComputedStyle) {
return false;
}
var el = document.createElement('p'),
has3d,
transforms = {
'webkitTransform':'-webkit-transform',
'OTransform':'-o-transform',
'msTransform':'-ms-transform',
'MozTransform':'-moz-transform',
'transform':'transform'
};
// Add it to the body to get the computed style.
document.body.insertBefore(el, null);
for (var t in transforms) {
if (el.style[t] !== undefined) {
el.style[t] = "translate3d(1px,1px,1px)";
has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
}
}
document.body.removeChild(el);
return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
}
оригинальное сообщение в блоге, объявляющее о 3D-преобразованиях, имеет демонстрацию флип файла, который делает это с помощью медиа-запроса, например:
@media all and (-webkit-transform-3d) {
/* Use the media query to determine if 3D transforms are supported */
#flip-container {
-webkit-perspective: 1000;
}
#flip-card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
}
#flip-container:hover #flip-card {
-webkit-transform: rotateY(180deg);
}
}
Это сообщение в блоге содержит хорошее введение в медиа-запросы. В этом есть более подробная информация.
Вы можете попробовать CCS3 @поддерживает:
@supports (transform: translate3d) {
div {
transform : translate3d(20px,0,0);
}
}
@supports not (transform: translate3d) {
div {
transform: translate(20px,0);
}
}
Я бы предложил использовать Modernizr.
Он обнаруживает функцию для целого ряда функций браузера, включая 3D-преобразования. Он также предоставляет метод указания правил CSS для браузеров, которые имеют различные функции или нет, поэтому похоже, что он будет делать именно то, что вы ищете.
Надеюсь, что это поможет.
//The following is based on iScroll4 tests to determine if a browser supports CSS3 3D transforms.
var has3d = function() {
return ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix());
}
Возился с возможностью проверить поддержку 3d. В этой статье используется эта реализация от Jeffery Way. Позволяет меньше кода и больше случаев использования;)
/**
* Test For CSS3 property support
* use 'perspective' to test for 3d support
*/
var supports = (function() {
'use strict';
var div = document.createElement('div'),
vendors = 'Khtml ms O Moz Webkit'.split(' '),
len = vendors.length;
return function(prop) {
if (prop in div.style) return true;
prop = prop.replace(/^[a-z]/, function(val) {
return val.toUpperCase();
});
while(len--) {
if (vendors[len] + prop in div.style) {
return true;
}
}
return false;
};
})();
if(supports('perspective')) {
// do 3d stuff
}
Этот код настраивается для тестирования поддержки 3D-трансформации и других функций CSS3.
Плюсом этого кода является то, что он обнаруживает поддерживаемый префикс поставщика (если он есть). Назовите его:
testCSSSupport('transform')
Возможные значения возврата:
false, когда функция не поддерживается, или
{
vendor: 'moz',
cssStyle: '-moz-transform',
jsStyle: 'MozTransform'
}
когда поддерживается функция
/**
* Test for CSS3 feature support. Single-word properties only by now.
* This function is not generic, but it works well for transition and transform at least
*/
testCSSSupport: function (feature, cssTestValue/* optional */) {
var testDiv,
featureCapital = feature.charAt(0).toUpperCase() + feature.substr(1),
vendors = ['', 'webkit', 'moz', 'ms'],
jsPrefixes = ['', 'Webkit', 'Moz', 'ms'],
defaultTestValues = {
transform: 'translateZ(0.5em) rotateY(10deg) scale(2)'
// This will test for 3D transform support
// Use translateX to test 2D transform
},
testFunctions = {
transform: function (jsProperty, computed) {
return computed[jsProperty].substr(0, 9) === 'matrix3d(';
}
};
function isStyleSupported(feature, jsPrefixedProperty) {
if (jsPrefixedProperty in testDiv.style) {
var testVal = cssTestValue || defaultTestValues[feature],
testFn = testFunctions[feature];
if (!testVal) {
return false;
}
//Assume browser without getComputedStyle is either IE8 or something even more poor
if (!window.getComputedStyle) {
return false;
}
testDiv.style[jsPrefixedProperty] = testVal;
var computed = window.getComputedStyle(testDiv);
if (testFn) {
return testFn(jsPrefixedProperty, computed);
}
else {
return computed[jsPrefixedProperty] === testVal;
}
}
}
//Create a div for tests and remove it afterwards
if (!testDiv) {
testDiv = document.createElement('div');
document.body.appendChild(testDiv);
setTimeout(function () {
document.body.removeChild(testDiv);
testDiv = null;
}, 0);
}
var cssPrefixedProperty,
jsPrefixedProperty;
for (var i = 0; i < vendors.length; i++) {
if (i === 0) {
cssPrefixedProperty = feature; //todo: this code now works for single-word features only!
jsPrefixedProperty = feature; //therefore box-sizing -> boxSizing won't work here
}
else {
cssPrefixedProperty = '-' + vendors[i] + '-' + feature;
jsPrefixedProperty = jsPrefixes[i] + featureCapital;
}
if (isStyleSupported(feature, jsPrefixedProperty)) {
return {
vendor: vendors[i],
cssStyle: cssPrefixedProperty,
jsStyle: jsPrefixedProperty
};
}
}
return false;
}
Bootstrap использует следующий код:
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .carousel-item {
transition: transform 0.6s ease-in-out;
backface-visibility: hidden;
perspective: 1000px;
}
.carousel-inner > .carousel-item.next,
.carousel-inner > .carousel-item.active.right {
left: 0;
transform: translate3d(100%, 0, 0);
}
.carousel-inner > .carousel-item.prev,
.carousel-inner > .carousel-item.active.left {
left: 0;
transform: translate3d(-100%, 0, 0);
}
.carousel-inner > .carousel-item.next.left,
.carousel-inner > .carousel-item.prev.right,
.carousel-inner > .carousel-item.active {
left: 0;
transform: translate3d(0, 0, 0);
}
}
tl: dr - Использовать нюхание агента пользователя. Ниже приведено описание script для определения поддержки CSS 3D-преобразования в браузерах: https://github.com/zamiang/detect-css3-3D-transform
Я пробовал большинство методов в этом сообщении, среди прочих, как Модернизатор и Meny, но не может поддерживать браузеры, такие как Firefox, сохраняя при этом хороший опыт для старых браузеров, таких как Safari 4 и 5, устройства iOS и Chrome на Retina MacBook (все они имеют свои особенности).
CSS3 3D-преобразования включают взаимодействие между браузером и графической картой. Браузер может анализировать объявления 3D, но может не иметь возможности правильно проинструктировать графическую карту в том, как отображать вашу страницу. Есть много возможных результатов, начиная от рендеринга страницы и заканчивая строками через нее (Safari 4), а затем сбрасывает браузер через несколько секунд (Safari on iOS4). Любой "метод обнаружения объектов" неприемлемо обозначил бы эти как "поддерживает 3D3-преобразования CSS3. Это один из случаев, когда" обнаружение функции не работает, а пользовательский фальсификатор (и множество тестов) выигрывает руки вниз.
В большинстве случаев обнаружение функции предполагает двоичный файл "поддерживает" или "не поддерживает". Это не относится к CSS3 3D Transforms - существует "градиент поддержки".
Поддержка CSS3 3D-преобразования может быть разделена на 4 уровня:
Этот script вернет true в сценарии один и два, но false для 3 и 4:
Примечание: новое для участия в stackoverflow - сообщите мне, если я должен вставить этот код в строку (это немного длиннее)
Использование jQuery:
var cssTranslate3dSupported = false;
(function()
{
var div = $('<div style="position:absolute;">Translate3d Test</div>');
$('body').append(div);
div.css(
{
'transform' : "translate3d(20px,0,0)",
'-moz-transform' : "translate3d(20px,0,0)",
'-webkit-transform' : "translate3d(20px,0,0)",
'-o-transform' : "translate3d(20px,0,0)",
'-ms-transform' : "translate3d(20px,0,0)"
});
cssTranslate3dSupported = (div.offset().left == 20);
div.empty().remove();
})();
Автор Hardware Accelerated Accordion выполняет следующие действия:
var has3d = ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix())
просто используйте:
alert($.support.cssTransform3d);
это предупреждает true, если поддерживается, и false, если не