JSFiddle

  • CSS Perspective Portfolio - Complex

    No-Library (pure JS), HTML, CSS, JavaScript

    // Purely experimental at this stage. Degrades terribly, not sure about usability and having problems with the use of positioning when ...
  • CSS3 background-clip:text

    No-Library (pure JS), HTML, CSS, JavaScript

    /* css3 background-clip:text demo
       by @girlie_mac
    
       Cassiopeia A - Picture by NASA JPL 
        http://www.jpl.nasa.gov
    */
  • 3D Text

    Mootools 1.3.2, HTML, CSS, JavaScript

    //http://www.we-are-gurus.com/blog/1501-create-a-3d-block-with-css3
  • Canvas 3D Rendering

    No-Library (pure JS), HTML, CSS, JavaScript

    /* VECTOR */
    function Vector(size,values)
    {
    	this.size	= size;
    	this.values	= new Array(this.size);
    	
    	for (var i=0;i<this.size;i++)
    		this.values[i]=0.0;
    	
    	if (values)
    	{
    		if (values instanceof Vector)
    			values=values.values;
    			
    		for (var i=0;i<Math.min(this.size,values.length);i++)
    			this.values[i]=values[i];
    	}
    }
    
    Vector.prototype.resized=function(size)
    {
    	return new Vector(size,this);
    };
    
    Vector.prototype.multiplyScalar=function(b)
    {
    	var c=new Vector(this.size);
    	
    	for (var i in this.values)
    		c.values[i]=(this.values[i]*b);
    	
    	return c;
    };
    
    Vector.prototype.divideScalar=function(b)
    {
    	var c=new Vector(this.size);
    	
    	for (var i in this.values)
    		c.values[i]=(this.values[i]/b);
    	
    	return c;
    };
    
    Vector.prototype.addVector=function(b)
    {
    	var c=new Vector(this.size);
    	
    	for (var i in this.values)
    		c.values[i]=(this.values[i]+b.values[i]);
    	
    	return c;
    };
    
    Vector.prototype.subtractVector=function(b)
    {
    	var c=new Vector(this.size);
    	
    	for (var i in this.values)
    		c.values[i]=(this.values[i]-b.values[i]);
    	
    	return c;
    };
    
    Vector.prototype.length2=function()
    {
    	var l2=0.0;
    	
    	for (var i in this.values)
    		l2+=(this.values[i]*this.values[i]);
    	
    	return l2;
    };
    
    Vector.prototype.length=function()
    {
    	return Math.sqrt(this.length2());
    };
    
    Vector.prototype.dot=function(b)
    {
    	var d=0.0;
    	
    	for (var i in this.values)
    		d+=(this.values[i]*b.values[i]);
    	
    	return d;
    };
    
    Vector.prototype.cross=function(b)
    {
    	if (this.size!=3 || b.size!=3)
    		throw new Error("Cross product is only defined for vectors with a length of 3");
    	
    	var c=new Vector(3);
    	
    	c.values[0]=(this.values[1]*b.values[2])-(this.values[2]*b.values[1]);
    	c.values[1]=(this.values[2]*b.values[0])-(this.values[0]*b.values[2]);
    	c.values[2]=(this.values[0]*b.values[1])-(this.values[1]*b.values[0]);
    	
    	return c;
    };
    
    Vector.prototype.normalized=function()
    {
    	return this.divideScalar(this.length());
    };
    
    Vector.prototype.negated=function()
    {
    	var c=new Vector(this.size);
    	
    	for (var i in this.values)
    		c.values[i]=-this.values[i];
    	
    	return c;
    };
    
    /* MATRIX */
    function degreesToRadians(degrees)
    {
    	return (degrees*(Math.PI/180));
    }
    
    function Matrix(rows,columns,values)
    {
    	this.rows		= rows;
    	this.columns	= columns;
    	
    	this.values		= new Array(this.rows*this.columns);
    	
    	for (var i=0;i<this.rows;i++) for (var j=0;j<this.columns;j++)
    		this.set(i,j,(i==j? 1.0:0.0));
    	
    	if (values)
    	{
    		if (values instanceof Matrix)
    		{
    			for (var i=0;i<Math.min(this.rows,values.rows);i++)
    				for (var j=0;j<Math.min(this.columns,values.columns);j++)
    					this.set(i,j,values.get(i,j));
    				
    			return;
    		}
    		
    		if (values.length>(this ...</this.size;i++)
    		this.values[i]=0.0;
    	
    	if>
  • css 3d cube

    Source: http://cssatoms.com/miscellaneous/create-a-3d-cube-in-pure-css3/

    <div class="face top">TOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOP</div>
    <div class="face left">LEFTLEFTLEFTLEFTLEFTLEFTLEFTLEFTLEFTLEFTLEFTLEFTLEFTLEFTLEFTLEFTLEFTLEFTLEFTLEFTLEFTLEFTLEFT</div>
    <div class="face right">RIGHTRIGHTRIGHTRIGHTRIGHTRIGHTRIGHTRIGHTRIGHTRIGHTRIGHTRIGHTRIGHTRIGHTRIGHTRIGHTRIGHTRIGHTRIGHTRIGHTRIGHT</div>
  • CSS3 Animation: 3D Flip #1 is the latest revision

    Keeping it simple. A CSS3 3D flip effect...

    $('.front').click(function(){
        $(this).toggleClass('rotation-animation');
    });
  • amcharts Pie 3D

    No-Library (pure JS), HTML, CSS, JavaScript

    var chart;
    var legend;
    
    var chartData = [{
        country: "Lithuania",
        value: 260},
    {
        country: "Ireland",
        value: 201},
    {
        country: "Germany",
        value: 65},
    {
        country: "Australia ...
  • amcharts Pie Donut 3D

    No-Library (pure JS), HTML, CSS, JavaScript

    var map;
    
    var chart;
    var chartData = {};
    
    chartData.world = [
        { source: "Oil", energy: 3882.1},
        { source: "Natural Gas", energy: 2653.1},
        { source ...
  • 3D Pixel renderer - basic floor

    No-Library (pure JS), HTML, CSS, JavaScript

    var canvas = document.createElement('canvas'),
        width = canvas.width = window.innerWidth, 
        height = canvas.height = window.innerHeight,
        halfWidth = width/2,
        halfHeight = height ...
  • Advanced logos with jQuery and CSS

    jQuery 1.7.2, HTML, CSS, JavaScript

    var splitWords = function(str, element) {
    
        var parts = str.split(' ');
        var html = '';
    
        for (var i = 0; i < parts.length; i++) {
    
            var part = parts[i];
            var sep = (i != 0 || i < (parts.length - 1)) ? ' ' : '';
    
            html += sep + '<span class="word">' + part + '</span>' + sep;
    
    
    
        }
    
        element.html ...