CODEWITHSUNDEEP
htmlcss
nagaking
nagaking

Reputation: 57

CSS transform not working in Internet Explorer 7 and below

I am using a CSS3 style-sheet to zoom images but it's not working in Internet Explorer 7 and below.

.resultitem{
  opacity: 0.75;
  transition: 0.75s ease-in-out;

}
.resultitem:hover {
  opacity: 1;
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
          display:block;
}

Upvotes: 0

Views: 830

Answers (2)

n1xx1
n1xx1

Reputation: 2076

IE9 supports CSS3 transformation with -ms-trasform but for older version there isn't any method but using a filter:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
    M11=1.3, M12=0,
    M21=0, M22=1.3);

Where 1.3 is your scale factor.

M11, M12, M21 and M22 are values of the transformation matrix that will be applied to the element.

Note that this matrix will not scale the rectangle in the center. The best way to resolve this is to use some negative margins, minus half width times the factor for the left margin and minus half height times the factor for the top.

Links:
- MSDN
- Transformation Matrix

Upvotes: 2

web2008
web2008

Reputation: 914

The transform property is not supported in any browser.

Internet Explorer(IE9+) supports an alternative, the -ms-transform property (2D transforms only).

Firefox supports an alternative, the -moz-transform property (2D transforms only).

Opera supports an alternative, the -o-transform property (2D transforms only).

Safari and Chrome support an alternative, the -webkit-transform property (3D and 2D transforms).

Upvotes: 0

Related Questions