CLOSE SEARCH

RenderTransform과 OpacityMask를 이용한 이미지 반사효과

이미지 반사 효과를 구현하기 위해 그리드 상에 두개의 Image 엘리먼트를 추가한다. 그리고 반사될 이미지의 RenderTransformOrigin 값을 변경한다.

그 후 속성-엘리먼트 구문을 통해 RenderTransform 을 ScaleTransform 으로 지정한다. ScaleTransform 의 Y 스케일에 -0.7 값을 설정해서 이미지가 상하 반전되고 높이가 30% 작아지도록 한다. 그리고 아래쪽으로 갈수록 투명해지도록 OpacityMask 에 선형그레디언트를 추가한다.

Filed under: Windows & Windows Phone

  1. Thanks for all of your work on this web page. I am looking forward to reading more of your posts in the future.