CSS3 변형 이미지와 텍스트

나는 카드 드로우의 환상을 만들려고 노력해 왔고, 카드 위에 마우스를 올리면 회전하여 더 커져서 텍스트를 더 잘 읽을 수있게되었습니다. 문제는 이미지 위에 마우스를 올려 놓으면 이미지가 잘 작동하지만 무작위로 생성되어 텍스트를 하드 코드 할 수 없기 때문에 텍스트가 커지지 않는다는 것입니다. 텍스트가 이미지를 따르는 지 확인하는 방법이 있습니까?CSS3 변형 이미지와 텍스트

CSS :

#CardHeader { 

    top: 50%; 
    left: 45%; 
    position: fixed; 
    z-index: 1; 
} 

#CardText { 
    top: 65%; 
    left: 45%; 
    width: 200px; 
    position: fixed; 
    z-index: 1; 
} 

#cardImage { 
    height: 300px; 
    width: 200px; 
} 

.cardDiv { 
    top: 50%; 
    left: 45%; 
    position: fixed; 

    -webkit-animation: fadein 2s; /* Safari and Chrome */ 
    -moz-animation: fadein 2s; /* Firefox */ 
    -ms-animation: fadein 2s; /* Internet Explorer */ 
    -o-animation: fadein 2s; /* Opera */ 
    animation: fadein 2s; 

    -webkit-transition: 1s ease-in-out; 
    -moz-transition: 1s ease-in-out; 
    -o-transition: 1s ease-in-out; 
    transition: 1s ease-in-out; 

    text-align: center; 
} 

.cardDiv:hover { 
    -webkit-transform: rotate(360deg) scale(2); 
    -moz-transform: rotate(360deg) scale(2); 
    -o-transform: rotate(360deg) scale(2); 
    -ms-transform: rotate(360deg) scale(2); 
    transform: rotate(360deg) scale(2); 
} 

@keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Firefox */ 
@-moz-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Safari and Chrome */ 
@-webkit-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Internet Explorer */ 
@-ms-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Opera */ 
@-o-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

HTML/ASP.NET : 여기

코드입니다

<div class="cardDiv" runat="server"> 

    <asp:Label ID="CardHeader" runat="server"></asp:Label> 
    <asp:Label ID="CardText" runat="server"></asp:Label> 

    <asp:Image ID="cardImage" runat="server" ImageUrl="~/Images/kort.png" Visible="false"/> 
</div>

TL; DR :

이미지 회전 및 스케일, 텍스트는 않습니다 아니. 제안?

편집 : http://jsfiddle.net/4ZQ58/

출처

2014-05-15 MaGi

에게 해결됩니다 부모 DIV에 절대 위치의 상대를 사용하여 ..? –

어떻게해야하는지 잘 모르겠다. 자바 스크립트에만 해당하는 줄 알았다. – MaGi

문제는 순수한 HTML과 CSS를 사용하여 완전히 재현 할 수 있습니다 (서버 측 항목에 개입하지 않아도 됨). 바이올린이 작동하면 fidde를 만들어야합니다. 즉, 서버 측에 관련된 일부 항목이있는 현재 코드에 문제가 있음을 의미합니다. –

문제는 당신이 <img>를 제외하고 모두를위한 fixed 위치를 적용한 것입니다 : 바이올린이 문제를 설명합니다. 고정 위치 요소는 창 자체에 상대적으로 배치됩니다. 회전 할 때 창 밖으로 날아갑니다. 당신이 [JSFiddle] (http://jsfiddle.net) 또는 무언가에이를 복제 할 수있는 문제

JSFiddle Full Screen Demo

JSFiddle

출처

2014-05-15 10:58:51

고마워요! 이 문제는 나를 미치게 만들었습니다. – MaGi

CSS3 변형 이미지와 텍스트

답변

관련 문제