HTML5는 페이지와 관련된 상대 번역

번역은 어떻게 적용합니까? 요소에 번역을 적용 할 수는 있지만 어떻게 변형합니까?HTML5는 페이지와 관련된 상대 번역

예를 들어, 아래 코드에서 "card"요소는 시작 위치와 관련하여 50, 100으로 이동합니다. 대신 내가 원하는 것은 페이지 중심으로 이동시키는 것입니다.

<html> 
<head> 
<style> 

.face { 
    -webkit-backface-visibility: hidden; 
    position: absolute; 
    height: 140; 
    width: 80; 
    overflow: hidden; 
} 

.card { 
    height: 100; 
    width: 80; 
    float: left; 
    -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5); 
    margin-left: 5px; 
    -webkit-transition-property: transform; 
    -webkit-transition-duration: 0.25s; 
    -webkit-transition-timing-function: ease-out; 
} 

.activated { 
    -webkit-transform: scale(2) translate(50px, 100px); 
    -webkit-transition-duration: 0.35s; 
    -webkit-transition-timing-function: ease-in; 
} 

</style> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script> 

$(document).ready(function() { 
    $('.card').click(function (e) { 
     e.preventDefault(); 
     $(this).toggleClass("activated"); 
    }); 
}); 

</script> 
</head> 

<body> 

<div class="card"> 
<div class="face front"> 
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" /> 
<span>blah!</span> 
</div> 
<div class="face back">explanation</div> 
</div> 

<div class="card"> 
<div class="face front"> 
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" /> 
<span>blah!</span> 
</div> 
<div class="face back">explanation</div> 
</div> 

<div class="card"> 
<div class="face front"> 
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" /> 
<span>blah!</span> 
</div> 
<div class="face back">explanation</div> 
</div> 

<div class="card"> 
<div class="face front"> 
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" /> 
<span>blah!</span> 
</div> 
<div class="face back">explanation</div> 
</div> 


</body> 
</html>

출처

2010-06-07 ʞɔıu

HTML5와 관련이 있습니다. CSS3입니다. – mercator

나는 그것에 대해 translate()을 사용해야한다고 생각하지 않습니다. 올바른 값을 계산하거나 JavaScript를 사용하여 transform-origin을 조작 할 수는 있지만 CSS 변환을 사용하는 목적을 상실한 것 같습니다.

이

-webkit-transition-property: all;

그런 다음 위치 및 전환을 수행하는 "일반"CSS를 사용할 수 있습니다 : 당신이 .activate에서 translate()를 제거하고에 .card의 전환 속성을 변경할 수 있도록

당신은뿐만 아니라 속성에 애니메이션을 적용 할 수 있습니다 나머지는 할거야. 예 : .activated 이러한 속성을 추가 : 오히려 그와 약간의 문제가있다

position: absolute; 
top: 50%; 
left: 50%; 
margin-top: -50px; 
margin-left: -40px;

하지만. CSS는 부드럽게 top, left 및 margin 속성을 원활하게 전환 할 수 있지만 position 속성을 원활하게 전환 할 수 없으므로 카드가 활성화되면 먼저 왼쪽 상단으로 이동 한 다음 페이지 중앙으로 부드럽게 이동합니다.

원래 카드를 절대적으로 배치하는 것 이외의 해결책이 있는지 확실하지 않습니다.

또한 translate()을 사용하면 다른 카드의 위치는 활성화해도 영향을받지 않습니다. 예를 들어, 활성화 된 카드는 흐름에서 꺼내 지므로 다른 카드는 틈을 메우기 위해 왼쪽으로 이동합니다 (유동 요소처럼). 그건 네가 원하는 것도 아니 겠지. 당신이 절대적으로 그들 모두를 함께 시작하도록한다면 그것은 일어나지 않을 것입니다. 물론

, 그들은 여전히 실험있어 고려하여이 같은 문제에 대한 사양 자체가 질문의 많음이있다 :이 실제로 아무것도하지 않는

출처

2010-06-07 16:15:43 mercator

그가 jQuery를 사용하고 있기 때문에 점프를 0,0으로 막기 위해 절대 위치를 가져올 수 있고'.activated' 클래스를 추가 할 때 적절한 값을 변경할 수 있습니다. 뭔가 'var thisOffset = $ (this) .offset(); – mVChr

jquery를 사용하여 끝났습니다. $$ (this) .css ({ 'position': '절대', 'top': thisOffset.top, 'left': thisOffset.left} 요소를 복제하고 원본 위에 복제본을 배치 한 다음 가시성을 해제하고 해당 애니메이션을 수행합니다. –

HTML5는 페이지와 관련된 상대 번역

답변

관련 문제