Clever Geek Handbook

Deformation image to circle / arc with css

Is there a reliable CSS way to deform a rectangular image into a circle or arc?

I know how to stretch, etc., but applying shape deformation seems to be impossible. It is right..? Maybe an SVG transform ...? Ideally, this would be a transformation, which could be a transition.

  • not to mention using the border radius to simulate flat figures, but the actual deformation of the image.
+3


source to share


3 answers


No , this is not possible yet, because CSS only supports linear transformations.



However, the answer to this similar question has an example using experimental filters from Adobe to create a sucking effect: How to use a 3D CSS matrix to create a curved warp effect

+4


source


When and how will the rectangle be transformed? If this is, say, a state :hover

, then all you need is:

Html

<img src="#" class="img-circle" />


CSS

.img-circle:hover {
    border-radius: 50%;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

Here's an example: http://jsfiddle.net/YcacT/

+1


source


Do you need this one?

.circle {
  border-radius: 50%;
}

http://jsfiddle.net/6AHTb/

The border-radius property is supported in IE9 +, Firefox 4+, Chrome, Safari 5+, and Opera.

0


source






More articles:


All Articles