văn bản hình dạng cung tròn với hỗ trợ css3 và ie8

Question

Tôi đã cố gắng cung cấp một hình cung tròn để văn bản với các thuộc tính css3 và cũng thay đổi js để hỗ trợ ie8. Nhưng điều này không hiệu quả.

this.$letters.each(function (i) { 
    var $letter = $(this), 
     transformation = (_self.options.radius === -1) ? 'none' : 'translateX(' + $letter.data('x') + 'px) translateY(' + $letter.data('y') + 'px) rotate(' + $letter.data('a') + 'deg)', 
     transition = (animation) ? 'all ' + (animation.speed || 0) + 'ms ' + (animation.easing || 'linear') : 'none'; 


    filterIE = 'M11=' + $letter.data('x') + ', M21=' + $letter.data('y') + ',rotation=' + $letter.data("a") + 'deg'; // js function for supporting ie8 
    //alert(filterIE); 
    $letter.css({ 
     '-webkit-transition': transition, 
     '-moz-transition': transition, 
     '-o-transition': transition, 
     '-ms-transition': transition, 
     'transition': transition 
    }) 
    .css({ 
     '-webkit-transform': transformation, 
     '-moz-transform': transformation, 
     '-o-transform': transformation, 
     '-ms-transform': transformation, 
     'transform': transformation, 
     'filter': "progid:DXImageTransform.Microsoft.Matrix(" + filterIE + ")" // js function for supporting ie8 
    }); 

    function getIEVersion() { 
     var rv = -1; // Return value assumes failure. 
     if (navigator.appName == 'Microsoft Internet Explorer') { 

      var ua = navigator.userAgent; 
      var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); 
      if (re.test(ua) != null) 

       rv = parseFloat(RegExp.$1); 
     } 
     return rv; 
    } 


    function checkVersion() { 
     var ver = getIEVersion(); 

     if (ver != -1) { 
      if (ver <= 9.0) { 
       //.css("-ms-filter","progid:DXImageTransform.Microsoft.Matrix(M11=1.4488887394336025, M12=-0.388228567653781, M21=0.388228567653781, M22=1.4488887394336025, SizingMethod='auto expand')" 
       //);// do something 
      } 
     } 
    } 

    checkVersion(); 
}); 

văn bản được đánh dấu đậm được thực hiện thay đổi đối với chức năng js của tôi. Có ai có thể giúp tôi ngoài này không. tôi đã tạo bản trình diễn trên jsfiddle

Answer 1

Mã chuyển đổi của bạn cho IE là sai. Cần phải như sau:

var cos = Math.cos; 
var sin =Math.sin; 
var deg2rad = 180 * Math.PI; 
var filterIE = 'M11=' + ($letter.data('x')+cos($letter.data("a")/deg2rad)) + ',M12=' + sin($letter.data("a")/deg2rad) + ', M21=' + ($letter.data('y')-sin($letter.data("a")/deg2rad)) + ',M22=' + cos($letter.data("a")/deg2rad) + ',sizingMethod=\'auto expand\'' 

Ngoài ra, IE9 + hỗ trợ chuyển đổi CSS3. Bạn chỉ cần tiền tố -ms-.

Answer 2

Khi câu hỏi được hỏi vào năm 2013 và IE8 đang nhanh chóng trên đường ra, tôi nghĩ tôi sẽ cung cấp liên kết tới trình tạo CSS văn bản cung cấp tuyệt vời: http://csswarp.eleqtriq.com/.