2014-10-18 3 views
2
변환

에 유래없는 나는 내 아이디어를 스케치하고 나는이 유사 만들려면 링크CSS 요소 제안

을 게시 왜 이미지 tha'ts를 게시 (10) 대표가 필요에 의한 이미지를 게시 할 수.http://themesand.com/link.jpg

의견을 보내 주시겠습니까? 나는 이와 비슷한 코드를 작성하는 것과 같은 CSS로 그것을 만들려고한다.

div class='main' 를 만들고 내부 maindiv class='box' 첨가 box 요소

또는 유사한 효과를 달성하기 위해 다른 JS 플러그인이있는 회전 CSS를 작성?

나를 제안 할 수 있습니까?

답변

4

변형 : rotate (45deg); 당신이 그 상자에 일부 콘텐츠를 원하는 경우 http://codepen.io/anon/pen/kwifj

, 당신은 다시 회전 할 수 있습니다 트릭 나는 거친 솔루션으로 펜을 만들었습니다

.box { 
    border:1px dashed black; 
    width:100px; 
    height:100px; 
    position:relative; 
    -webkit-transform:rotate(45deg); 
    overflow:hidden; 
} 

을 할 것입니다. 또 다른 해결책은 회전 된 요소 위에 텍스트를 렌더링하고 절대 위치 지정하는 것입니다.

3

당신은 CSS가

div.box{ 
    -ms-transform: rotate(30deg); /* IE 9 */ 
    -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */ 
    transform: rotate(30deg); /* Standard syntax */ 
} 

귀하의 이미지와 일치 상자 번호 DIV 년대의 번호를 사용하는 회전 각도를 조절 재산을 변환하여 그것을 할 수 있습니다.

+0

그것은 나를 CSS 코드를 많이 만들 어쨌든 그것을 달성하는 것입니다? – Shaxrillo