第二次防止CSS3旋轉

有沒有辦法做到這一點？我有一個旋轉到灰色區域的圖像。這可以。我想要的是，如果我再次點擊該區域，它會在灰色區域中顯示。做這個的最好方式是什麼？第二次防止CSS3旋轉

在這裏，你有什麼，我有一個例子：

CSS：

$('.f1_container').one('click', function() { 
    $(this).addClass('active'); 
});

的one functi：

.f1_container { 
    position: relative; 
    margin:10px; 
    width: 450px; 
    height: 281px; 
    z-index : 1; 
    float:left; 
    } 
    .f1_container { 
    -webkit-perspective: 1000; 
    perspective: 1000; 
    } 
.f1_card { 
    width: 100%; 
    height: 100%; 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: all 1.0s linear; 
    transform-style: preserve-3d; 
    transition: all 1.0s linear; 
    } 
    .f1_container.active .f1_card { 
    -webkit-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    box-shadow: -5px 5px 5px #aaa; 
    } 
    .face { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    } 
    .face.back { 
    display: block; 
    -webkit-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    box-sizing: border-box; 
    color: white; 
    text-align: center; 
    background-color: #aaa; 
    } 
    body{width:2000px}

來源

2014-09-03 Siyah

你想獲得灰色地帶，如果點擊灰色地帶？心不是？ – 2014-09-03 11:55:38

難道你不能只在第一次點擊時做一個'addClass'，而不是去做'toggleClass'嗎？ – Harry 2014-09-03 11:55:58

替換爲您的JS on只對每個元素執行一次事件。

此外，我已將您的toggleClass更改爲簡單的addClass，這些更改本身應該都足夠了，但是，這些更改無需在此處進行切換。

http://jsfiddle.net/YaUPs/392/

來源

2014-09-03 11:56:07

非常好的解決方案。非常感謝你。 – Siyah 2014-09-03 11:57:49

你想，如果點擊灰色地帶灰色地帶？心不是？如果是的話下面這將幫助

$('.f1_container').click(function() { 
$(this).addClass('active'); 
});

來源

2014-09-03 11:56:42

第二次防止CSS3旋轉

回答

相關問題