D3 Examples - A tiny D3 plugin for 3D flipping

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="./flipper.js"></script>
    <style>
    .back-div{ background: lightblue }
    .front-div{ background: lightgreen }
    </style>
​
</head>
<body>
​
<div class="front-div">Front</div>
<div class="back-div">Back</div>
<div class="root-container"></div>
​
<script type="text/javascript">
​
    d3.select('.front-div')
        .append('svg')
        .attr({width: 300, height: 300})
        .append('rect')
        .attr({x: 100, y: 100, width: 100, height: 100})
        .style({'fill': 'aliceblue'});
​
    d3.select('.back-div')
        .append('svg')
        .attr({width: 300, height: 300})
        .append('circle')
        .attr({cx: 150, cy: 150, r: 100})
        .style({'fill': 'orange'});
​
    var flipper = Flipper();
    flipper.size([400, 300]).flipSpeed(0.3).frontParent('.front-div').backParent('.back-div');
    flipper('.root-container');
​
</script>
</body>
</html>
    