Kolorwanie:
Status:
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
<html>
<head>
	<style>
		#kolko1 {
			background-color: blue;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			margin: auto;
			position: relative; left: 0px; top: 100px;
			transition: all .8s ease-in-out;
		}
		
		#kolko2 {
			background-color: green;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			margin: auto;
			position: relative; left: 90px; top: 120px;
			transition: all .8s ease-in-out;
			
		}
		
		#kolko3 {
			background-color: rebeccapurple;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			margin: auto;
			position: relative; left: 100px; top: 140px;
			transition: all .8s ease-in-out;
			
		}
		
		#kolko4 {
			background-color: red;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			margin: auto;
			position: relative; left: -150px; top: -300px;
			transition: all .8s ease-in-out;
			
		}
		
		#kolko5 {
			background-color: palevioletred;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			margin: auto;
			position: relative; left: -140px; top: -250px;
			transition: all .8s ease-in-out;
			
		}
		
		#kolko6 {
			background-color: yellowgreen;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			margin: auto;
			position: relative; left: 300px; top: -850px;
			transition: all .8s ease-in-out;
			
		}
		
		#kolko7 {
			background-color: saddlebrown;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			margin: auto;
			position: relative; left: 320px; top: -800px;
			transition: all .8s ease-in-out;
			
		}
		
		
		
		#kolko1:hover {
			transform: perspective(200px) rotateY(90deg);
		}
		
		#kolko2:hover {
			transform: rotateX(90deg);
		}
		
		#kolko3:hover {
			transform: rotateX(90deg);
		}
		
		#kolko4:hover {
			transform: rotateX(90deg);
		}
		
		#kolko5:hover {
			transform: rotateX(90deg);
		}
		
		#kolko6:hover {
			transform: rotateX(90deg);
		}
		
		#kolko7:hover {
			transform: rotateX(90deg);
		}
		
	</style>
</head>
<body>
	<div id="kolko1"></div>
	<div id="kolko2"></div>
	<div id="kolko3"></div>
	<div id="kolko4"></div>
	<div id="kolko5"></div>
	<div id="kolko6"></div>
	<div id="kolko7"></div>
</body>
</html>

Copyrights 2014-2019 © Wklejaj.pl Wszelkie prawa zastrzeżone.