html{
width: 100%;
overflow: hidden;
padding:0px;margin:0px;}

body{
padding:0px;margin:0px;}

#element{
  width: 500px;
  height: 60px;
}
  /*ROTATE FUNCTIE*/
#sinas{
	float: left;
	height: 50px;
	width: 50px;
  animation: roll 3s infinite;
  transform: roll(30deg);
	}

	@keyframes roll {
  	0% {transform: rotate(0);}
  	100% {transform: rotate(360deg);}
  }

	@keyframes roll { 
  	0% {transform: rotate(0);}
  	100% {transform: rotate(360deg);}
	}
  
  @-webkit-keyframes roll { 
  	0% {transform: rotate(0);}
  	100% {transform: rotate(360deg);}
	}
  
  @-moz-keyframes roll { 
  	0% {transform: rotate(0);}
  	100% {transform: rotate(360deg);}
	}
  
  @-ms-keyframes roll { 
  	0% {transform: rotate(0);}
  	100% {transform: rotate(360deg);}
	}
  
  @-o-keyframes roll { 
  	0% {transform: rotate(0);}
  	100% {transform: rotate(360deg);}
  }


/*VERTICAL FLIP-OVER FUNCTIE*/
#appel{
  float: left;
  height: 50px;
  width: 50px;
  animation: rotate 3s linear infinite;
  }

  @keyframes rotate {
    0% {transform: rotateX(0);}
    50% {transform: rotateX(180deg);}
    100% {transform: rotateX(360deg);}
  }
  
  @-webkit-keyframes rotate { 
    0% {transform: rotateX(0);}
    50% {transform: rotateX(180deg);}
    100% {transform: rotateX(360deg);}
  }
  
  @-moz-keyframes rotate { 
    0% {transform: rotateX(0);}
    50% {transform: rotateX(180deg);}
    100% {transform: rotateX(360deg);}
  }
  
  @-ms-keyframes rotate { 
    0% {transform: rotateX(0);}
    50% {transform: rotateX(180deg);}
    100% {transform: rotateX(360deg);}
  }
  
  @-o-keyframes rotate { 
    0% {transform: rotateX(0);}
    50% {transform: rotateX(180deg);}
    100% {transform: rotateX(360deg);}
  }


/*HORIZONTAL FLIP-OVER FUNCTIE*/
#stervrucht{
  float: left;
  height: 50px;
  width: 50px;
  animation: rotate 3s linear infinite;
  }

  @keyframes rotate {
    0% {transform: rotateY(0);}
    50% {transform: rotateY(180deg);}
    100% {transform: rotateY(360deg);}
  }
  
  @-webkit-keyframes rotate { 
    0% {transform: rotateY(0);}
    50% {transform: rotateY(180deg);}
    100% {transform: rotateY(360deg);}
  }
  
  @-moz-keyframes rotate { 
    0% {transform: rotateY(0);}
    50% {transform: rotateY(180deg);}
    100% {transform: rotateY(360deg);}
  }
  
  @-ms-keyframes rotate { 
    0% {transform: rotateY(0);}
    50% {transform: rotateY(180deg);}
    100% {transform: rotateY(360deg);}
  }
  
  @-o-keyframes rotate { 
    0% {transform: rotateY(0);}
    50% {transform: rotateY(180deg);}
    100% {transform: rotateY(360deg);}
  }


/*SCALE FUNCTIE*/
#kiwi{
    float: left;
    width: 50px;
    height: 50px;
    animation: scale 3s linear infinite;
  }

    @keyframes scale {
      25% {transform: scale(1.0);}
      50% {transform: scale(1.0);}
      75% {transform: scale(1.1);}
      100% {transform: scale(1.0);}
    }
    
    @-webkit-keyframes rotate { 
      25% {transform: scale(1.0);}
      50% {transform: scale(1.0);}
      75% {transform: scale(1.1);}
      100% {transform: scale(1.0);}
    }
  
    @-moz-keyframes rotate { 
      25% {transform: scale(1.0);}
      50% {transform: scale(1.0);}
      75% {transform: scale(1.1);}
      100% {transform: scale(1.0);}
    }
  
    @-ms-keyframes rotate { 
      25% {transform: scale(1.0);}
      50% {transform: scale(1.0);}
      75% {transform: scale(1.1);}
      100% {transform: scale(1.0);}
    }
  
    @-o-keyframes rotate { 
      25% {transform: scale(1.0);}
      50% {transform: scale(1.0);}
      75% {transform: scale(1.1);}
      100% {transform: scale(1.0);}
    }