make circle elements rotate in perspective

Question

Fiddle link

I am trying to make this circle in perspective(check fiddle link). I tried the css property but it shows unusual behaviour.

/*
using:
    circular positioning code:
        http://stackoverflow.com/a/10152437/1644202
    point at:
        http://pointat.idenations.com/api

depends on:
    jquery
    https://github.com/thomas-dotworx/jqrotate (pointat)
*/


function createFields() {
    $('.field').remove();
    var container = $('#container');
    for(var i = 0; i < +$('input:text').val(); i++) {
        $('<div/>', {
            'class': 'field',
            'text': i + 1,
        }).appendTo(container);
    }
}

function distributeFields(deg) {
    deg = deg || 0;
    var radius = 200;
    var fields = $('.field:not([deleting])'), container = $('#container'),
        width = container.width(), height = container.height(),
        angle = deg || Math.PI*3.5, step = (2*Math.PI) / fields.length;
    fields.each(function() {
        var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2);
        var y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
        if(window.console) {
            console.log($(this).text(), x, y);
        }
        $(this).css({
            left: x + 'px',
            top: y + 'px'
        });
        angle += step;
    });
}

$('input').change(function() {
    createFields();
    distributeFields();
    initPointAt();
});

var timer = null,
    timer2 = null;
$('#addone').click(function() {
    // do not append to current, otherwise you see it moving through the container
    $('.field').addClass('moveAni');
    
    $('<div/>', {
            'class': 'field',
            'text': $('.field').length +1
    })
    
    .css({
        left: $('#container').width()/2-25 + 'px',
        top: $('#container').height()/2-25 + 'px'})
    .addClass('moveAni')
    
    .appendTo('#container')
    .pointat({
        target: "#center",
        defaultDirection: "down"
    });
    
    distributeFields();

    // without css:
    //$('.field').pointat("updateRotation");
    
    // with css: for css move animation
    clearInterval(timer); clearTimeout(timer2);
    timer = setInterval(function() {
      	$('.field').pointat({
            target: "#center",
            defaultDirection: "down"
    		}); // does not seem to update correctly: .pointat("updateRotation")
    }, 20);
    timer2 = setTimeout(function() {
      	clearInterval(timer);
    }, 420); // css animation timeout, interval +1 extra to update after the ani
    
    // update input field
    $('input:text').val($('.field').length);
});

$('#delone').click(function() {
    $('#container .field:not([deleting]):last')
    .attr('deleting', 'true')
    .css({
        left: $('#container').width()/2-25 + 'px',
        top: $('#container').height()/2-25 + 'px'
    })
    .fadeOut(400, function() {
        $(this).remove();
    });

		// do distribiution as if the currently out-animating fields are gone allready
    distributeFields();

    clearInterval(timer); clearTimeout(timer2);
    timer = setInterval(function() {
        $('.field').pointat({
            target: "#center",
            defaultDirection: "down"
        }); // does not seem to update correctly: .pointat("updateRotation")
    }, 20);
    timer2 = setTimeout(function() {
      	clearInterval(timer);
    }, 420); // css animation timeout, interval +1 extra to update after the ani
    
    // update input field
    $('input:text').val($('.field:not([deleting])').length); // update yet
});


createFields();
distributeFields();
initPointAt();

    


function initPointAt() {
    $('.field').pointat({
        target: "#center",
        defaultDirection: "down",
        xCorrection: -20,
        yCorrection: -20
    });
}

body { padding: 2em; }
#container { width: 600px; height: 600px; border: 1px solid #000; position: relative; border-radius: 50%;}
#center { width: 10px; height: 10px; position: absolute; left: 295px; top: 295px; background: #000; border-radius: 50%; }
.field { position: absolute; background: #f00; }
#crosshair-x { width: 600px; height: 1px; background: #000; position: absolute; left: 0; top: 300px; }
#crosshair-y { width: 1px; height: 600px; background: #000; position: absolute; left: 300px; top: 0; }

.field {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.moveAni {
    transition: left 400ms ease-out, top 400ms ease-out;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//pointat.idenations.com/jquery.pointat.min.js"></script>
<script src="//pointat.idenations.com/jquery.rotate-1.0.1.min.js"></script>


Number of fields: <input type="text" value="4" />
<button id="addone">++</button>
<button id="delone">--</button>
<div id="container">
    <div id="center"></div>
    <div id="crosshair-x"></div>
    <div id="crosshair-y"></div>
</div>

Then i inserted an image tad inside container and tried to add field inside image tag.

I achieved this using three.js but don't want to do this in it because it takes too much time to load.

Answer 1

Wrap your container in another div you apply perspective to. The perspective must be applied to the parent, not to the element itself.

Updated Fiddle link : http://jsfiddle.net/w840vkbL/1/

#perspective {
     perspective: 500px;
     width: 150px;
}

#container {
     transform: rotateY(40deg);
     background: lightblue;
     height: 150px;
}

 <div id="perspective">
      <div id="container">
          <h3>SOME PERSPECTIVE CONTENT</h3>
      </div>
</div>