transform scale does not work with expected

Question

transform scale does not work with expected

Navigation

#1 by (5 votes)

3

I want to increase the size of a certain part of the graph when hovering. I tried the transform but it does not work very well.

example: link

css3

asked by anonymous 21.04.2015 / 17:44

1 answer

Disable / enable scrolling with JQuery Align text in the vertical center of a circle

score 5 · Accepted Answer

You should use the transform-origin property, note that it is necessary to set transform in the element without :hover , for the browser to undo the effect.

According to @GabrielOshiro's response, you can add compatibility for older browsers to transform-origin as well (when these properties were experimental using prefix -moz and -webkit )

I recommend reading: Is it necessary to add prefixes in some CSS properties?

Example:

path {
          -moz-transform: scale(1.0);
       -webkit-transform: scale(1.0);
            -o-transform: scale(1.0);
               transform: scale(1.0);
        transform-origin: center center;
   -moz-transform-origin: center center;
-webkit-transform-origin: center center;
}


path:hover {
          opacity: 0.8;
   -moz-transform: scale(1.1); 
-webkit-transform: scale(1.1);
     -o-transform: scale(1.1);
        transform: scale(1.1);
}

You can also add an animated effect using transition , eg:

#test {
        background-color: #f00;
                   width: 100px;
                  height: 100px;
          -moz-transform: scale(1.0);
       -webkit-transform: scale(1.0);
            -o-transform: scale(1.0);
               transform: scale(1.0);
        transform-origin: center center;
   -moz-transform-origin: center center;
-webkit-transform-origin: center center;
         -moz-transition: transform 0.5s ease;
      -webkit-transition: transform 0.5s ease;
              transition: transform 0.5s ease;
}

#test:hover {
          opacity: 0.8;
   -moz-transform: scale(1.1); 
-webkit-transform: scale(1.1);
     -o-transform: scale(1.1);
        transform: scale(1.1);
}

<div id="test"></div>

z-index and SVG

SVG does not seem to change position with z-index , so depending on the response from SOen it is necessary to do the process by the javascript to reposition, using el.parentNode.appendChild(el); , the problem is that Raphael.js works in different ways in each browser, so we will have to use the functions available for it instead of CSS.

Raphael.toFront will make the effect z-index
Raphael.animate will do the CSS-like effect

Example:

function efeitoHover(el) {
    el.mouseover(function () {
        el.toFront().animate({'opacity': '0.8', 'transform':"s1.1 1.1"}, 100);
    }).mouseout(function () {
        el.stop().animate({'transform': ""}, 50, "bounce");
    });
}

window.onload = function() {
    var data = [5,10,20,40,80,160,100];

    var color = ["red", "green", "blue", "yellow", "pink", "gray","black"];

    var paper, arc;

    var sectorAngleArr = [];
    var total = 0;
    var startAngle = 0;
    var endAngle = 0;
    var x1, x2, y1, y2 = 0;

    paper = Raphael("holder"); //circle

    for (var k = 0; k < data.length; k++) {
        total += data[k];
    }

    for (var i = 0; i < data.length; i++) {
        var angle = Math.ceil(360 * data[i] / total);
        sectorAngleArr.push(angle);
    }

    drawArcs();

    function drawArcs() {
        for (var i = 0; i < sectorAngleArr.length; i++) {
            startAngle = endAngle;
            endAngle = startAngle + sectorAngleArr[i];

            if(i == sectorAngleArr.length - 1) {  
                endAngle = 0;
            }

            x1 = parseInt(Math.round(200 + 195 * Math.cos(Math.PI * startAngle / 180)));
            y1 = parseInt(Math.round(200 + 195 * Math.sin(Math.PI * startAngle / 180)));

            x2 = parseInt(Math.round(200 + 195 * Math.cos(Math.PI * endAngle / 180)));
            y2 = parseInt(Math.round(200 + 195 * Math.sin(Math.PI * endAngle / 180)));

            var d = "M200,200  L" + x1 + "," + y1 + "  A195,195 0 " + ((endAngle - startAngle > 180) ? 1 : 0) + ",1 " + x2 + "," + y2 + " z";

            arc = paper.path(d);
            arc.attr("fill", color[i]);
            arc.attr("title", "Valor: "+data[i]);
            efeitoHover(arc);//Aplica o efeito
        }
        //clear arrays
        data = [];
        color = [];
        sectorAngleArr = [];
    }
};

#holder {
    height: 400px;
    width: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script><divid="holder"></div>