javascript - 能够翻转 div 框、改变它们的大小以及与内容交互

Question

我正在尝试创建一个带有可点击的小 div 框的设计，点击后它们会翻转 180° 并显示内容。您可以与之交互的内容:例如单击链接、复制文本或使用更多按钮更改内容。

我已经设法做到了这一点，但我的问题是:是否有更好的方法？

找到一个基本的网站example

但是基于 CSS 的另一边内容是不可交互的。

这是代码:

HTML

<div id="saos">
    <div id="pg1" style="display:none;">
        <blockquote>Page1</blockquote><br>
        Yay content.
    </div>
    <div id="pg2" style="display:none;">
        <blockquote>Page2</blockquote><br>
        More content.
    </div>
    <div class="x" style="display:none;" onclick="closePage()">
        <p>X</p>
    </div>
    <div id="2" class="an2 start startbak" onclick="openPage()">
        <p class="sp">Click!</p>
    </div>
    <div id="cont" style="display:none;">
        <p class="sp">Click!</p>
    </div>
</div>

CSS

.write {
    position: absolute;
    width: 100px;
    height: 50px;
    background: #0055ff;
    -webkit-transition: all 1.5s cubic-bezier(.08, 1, .08, 1);
    left: 10px;
    text-align: center;
    font-family: Verdana;
}
.write:hover {
    -webkit-transform: perspective(600px)scale(1.2);
    -moz-transform: perspective(600px)scale(1.2);
}
.write p {
    color: #002164;
    text-align: center;
    margin-top: 10px;
    font-size: 22px;
}
.an {
    -webkit-transition: all 1.5s cubic-bezier(.08, 1, .08, 1);
}
.an2 {
    -webkit-transition: all .5s ease;
}
.page {
    background-color: rgba(17, 17, 17, .8);
    position: absolute;
    left: 120px;
    border: 2px solid #252525;
    height: 330px;
    width: 530px;
    overflow: auto;
    font-size: 14px;
    color: #818181;
}
.start {
    text-align: center;
    font-family: Verdana;
    position: absolute;
    top: 150px;
    left: 290px;
    height: 120px;
    width: 120px;
    -webkit-transform: perspective(600px)rotateY(180deg)translateZ(-10px);
    -moz-transform: perspective(600px)rotateY(180deg);
}
.start:hover {
    background-color: #0055ff;
    cursor: pointer;
}
.startbak {
    background-color: #0036a3;
}
.mainbak {
    background: #252525;
}
.sp {
    color: #002164;
    margin-top: 43px;
    font-size: 30px;
    -webkit-transform: rotateY(180deg)rotateZ(-45deg)translateZ(-10px);
    -moz-transform: rotateY(180deg)rotateZ(-45deg);
}
.frame {
    top: 0px;
    left: 0px;
    position: absolute;
    width: 751px;
    height: 452px;
    -webkit-transform: perspective(600px)rotateY(0deg);
    -moz-transform: perspective(600px)rotateY(0deg);
}
.x {
    position: absolute;
    left: 700px;
    height: 18px;
    width: 45px;
    background-color: #c75050;
    color: #fff;
    display: table;
    text-align: center;
    font-size: 10px;
    font-family: Verdana;
    z-index: 2;
}
.x:hover {
    background-color: #e04343;
    cursor: default;
}
.x:active {
    background-color: #993d3d;
}
.x p {
    display: table-cell;
    vertical-align: middle;
}

JavaScript

var htmlString = '<div class="f an write" style="top: 10px;" name="Home" onClick="openTab(\'pg1\',\'0\')"><p>Home</p></div>\n'
htmlString += '<div class="f an write" style="top: 65px;" name="About" onClick="openTab(\'pg2\',\'1\')"><p>About</p></div>\n'

function openTab(id, n){
    for (var i=0;i<write.length;i++){
        write[i].className = 'f an write';    
        write[i].style.top = i*55+10+'px';
        name = write[i].getAttribute('name');
        write[i].innerHTML = '<p>'+name+'</p>';
    }
    write[n].className = 'f an page';
    write[n].style.top = '10px';
    write[n].innerHTML= '<div class="ins">'+document.getElementById(id).innerHTML+'</div>';
}

var id2 = document.getElementById('2'),
    x = document.getElementsByClassName('x')[0];

function openPage(){
    id2.className = 'an2 frame mainbak';
    setTimeout(function() {
        id2.className = 'an2 frame mainbak'
        id2.setAttribute('onclick','')
        document.getElementById('2').innerHTML=htmlString
    }, 150);
    setTimeout(function() {
        x.style.display='';
    }, 600);
}
function closePage(){
    id2.className = 'an2 start mainbak';
    setTimeout(function() {
        id2.className = 'an2 start startbak'
        id2.setAttribute('onclick','openPage()')
        document.getElementById('2').innerHTML=document.getElementById('cont2').innerHTML
    }, 150);
    x.style.display='none';
}

还做了一个JSFiddle但它似乎不起作用..

在我的浏览器上是这样。

Answer 1

只用几行 Javascript 就可以做到这一点。您发布的 Rich Bradshaw 示例是一个很好的起点。

我没有在悬停时启动翻转(通过 css 选择器)，而是添加了几行 Javascript - 实际上是 jQuery，但普通 JS 可以工作 - 在点击时添加相关类。它真的很好用......

See jsFiddle Demo

我还设法使背面可点击(如该演示中所示)，因此它应该可以满足您的所有需求。

通过这种方法，HTML 被简化为:

<div id="f1_container">
    <div id="f1_card" class="shadow">
        <div class="front face">
            <img src="http://lorempixel.com/450/281/" />
        </div>
        <div class="back face center">
            <p>This is nice for exposing more information about an image.</p>
            <p>Any content can go here.</p>
            <p>Including interactive HTML like
                <a href="http://www.example.com/">links</a></p>
        </div>
    </div>
</div>

Javascript 只是:

$('#f1_container').click(function() {
    $('#f1_container').addClass('clicked');
});