3D 공간에서 페이지 아래에 담그지 않고 요소를 회전하려면 어떻게해야합니까?

이미지 뱅크에서 이미지를 클릭하면 사용 가능한 모든 영역으로 확장되고 동시에 넘기는 CSS 3 효과를 얻으려고합니다.3D 공간에서 페이지 아래에 담그지 않고 요소를 회전하려면 어떻게해야합니까?

내가 이것을 수행 할 수 있었던 방법은 요소를 복제하고 절대적으로 원본 위에 위치시킨 다음 변환하는 것이 었습니다. 아래 코드에서 복제 된 이미지에는 clone 및 activated 클래스가 지정됩니다.

모두 양호합니다.

단, I는 사전 플립 일련의 이미지의 모든 이미지 플립 All 버튼을 이용하여 활성화 한 경우 (rotateY (180도를 갖는 origflipped 클래스) 그래서 지금 백가 도시되어 추가) 및 그런 다음 동일한 효과를 시도하고 (예 : 앞면을 앞면으로 펼치고 0으로 회전) 애니메이션에 의도하지 않은 부작용이 발생합니다.

rotateY 전환이 실행 중일 때 회전 효과의 이미지 절반이 아래 아래의 이미지가 보이고 다른 이미지 뒤에있는 3 차원 공간의 페이지와 같습니다.

그래서 이미지의 절반이 다른 것들 아래에 떠 다니지 않고 rotateY (180deg)에서 Y (0)로 회전 할 수 있습니까?

<html> 
<head> 

<style> 
    #target_area .face { 
     -webkit-backface-visibility: hidden; 
     position: absolute; 
    } 

    #target_area .face img { 
     vertical-align: middle; 
     height: 100%; 
    } 

    #target_area .face.back { 
     -webkit-transform: rotateY(180deg); 
    } 

    #target_area .card { 
     float: left; 
     margin-left: 5px; 

     -webkit-transform-style: preserve-3d; 
     -webkit-transition-property: all; 
     -webkit-transition-duration: 1s; 
     -webkit-transition-timing-function: ease-in; 
    } 

    #target_area .card.origshown { 
     -webkit-transition-property: none; 
     visibility: hidden; 
    } 

    #target_area .card.origflipped { 
     -webkit-transform: rotateY(180deg); 
    } 

    #target_area .card.clone { 
     float: none; 
     -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5); 
    } 

    #target_area .card.clone.activated { 
     -webkit-transform: rotateY(180deg); 
    } 

    #target_area .card.clone.origflipped { 
     -webkit-transform: rotateY(180deg); 

    } 

    #target_area .card.clone.origflipped.activated { 
     -webkit-transform: rotateY(0deg); 
    } 
</style> 






<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script> 

<script> 

$(document).ready(function() { 

    var ALL_CARDS = [ 
     ['http://twitpic.com/show/thumb/26n3ms', 'http://twitpic.com/show/thumb/26n3mr'], 
     ['http://twitpic.com/show/thumb/26n3ma', 'http://twitpic.com/show/thumb/26n3mq'], 
     ['http://twitpic.com/show/thumb/26n3mb', 'http://twitpic.com/show/thumb/26n3mt'], 
     ['http://twitpic.com/show/thumb/26n3mc', 'http://twitpic.com/show/thumb/26n3mu'], 
     ['http://twitpic.com/show/thumb/26n3md', 'http://twitpic.com/show/thumb/26n3mv'], 
    ]; 

    var width = 100; 

    for (var i = 0; i < ALL_CARDS.length; i++) { 

     $(document.createElement('div')) 
      .addClass("card") 
      .append(
       $('<img src="' + ALL_CARDS[i][0] + '" />') 
        .addClass("face front") 
       ) 
      .append(
       $('<img src="' + ALL_CARDS[i][1] + '" />') 
        .addClass("face back") 
       ) 
      .width(width) 
      .height(width + 10) 
      .appendTo($('#target_area')) 
      .find('img').width('100%').height('100%') 
      ; 
    } 


    $('#target_area .card') 
     .click(function (e) { 
      e.preventDefault(); 

      var original = $(this); 
      var proxy = $(this).clone(); 
      var body = $('body'); 

      original.addClass("origshown"); 

      proxy 
       .css({ 
        'position': 'absolute', 
        'top': this.offsetTop, 
        'left': this.offsetLeft - 5 
       }) 
       .click(function() { 
        original.removeClass("origshown"); 
        $(this).remove(); 
       }) 
       .addClass("clone") 
       .appendTo($('#target_area')) 
       ; 

      var border_width = 10; 

      proxy 
       .css({ 
        'background-color': 'white', 
        'top': border_width, 
        'left': border_width, 
        'height': body.height() - (2 * border_width), 
        'width': body.width() - (2 * border_width), 
        }) 
       .addClass('activated') 
       ; 


     }); 

    $('#flip_all').click(function (e) { 
     e.preventDefault(); 
     $('.card').toggleClass('origflipped'); 
    }); 
}); 

</script> 
</head> 
<body> 

<div id="target_area"></div> 
<input type="button" value="flip all" id="flip_all" /> 

</body> 
</html>

출처

2010-07-19 ʞɔıu

이 크롬 5.0.375.99에서 나를 위해 잘 작동 흠, 테스트

, http://jsfiddle.net/Fhxb3/

당신이, 당신은 어떤 브라우저를 사용하고있다 발급 무엇인지 너무 메신저하지? 또한

, 당신이 알고 메신저 있는지, 그것이 completly 파이어 폭스에서 깨진 있지만/예 (하지만이 -webkit 스타일

출처

2010-07-19 11:53:43 Hailwood

내가 사파리 5.0에서이 작업을 시도하고를 사용 그게 원인 –

3D 공간에서 페이지 아래에 담그지 않고 요소를 회전하려면 어떻게해야합니까?

답변

관련 문제