Witajcie,

Po parogodzinnej walce zrobiłem wykres słupkowy w którym wyświetlane są wartości i po najechaniu myszą obracają się i powiększają.
Część 'słupkowa' będzie w pętli, wartości będą pobierane z bazy.
Czy nie przekombinowałem i czy nie można było tego osiągnąć prościej?
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3.  
  4. <head>
  5.  
  6. <meta charset="UTF-8">
  7.  
  8. <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,600&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  9. <style>
  10. *,
  11. *:before,
  12. *:after {
  13. 	padding: 0px;
  14. 	margin: 0px;	
  15. 	color: #FFF;
  16.  
  17. font-family: 'Source Sans Pro';
  18. font-weight: 300;
  19. font-style: normal;	
  20.  
  21. transition-timing-function:ease-in;
  22. -webkit-transition-timing-function:ease-in;
  23. -o-transition-timing-function:ease-in;
  24. transform-origin:50% 50%;
  25. -webkit-transform-origin:50% 50%;
  26. -o-transform-origin:50% 50%;
  27. }
  28.  
  29. .slupek {	
  30. 	background: #34495e;
  31. 	width: 14px;
  32. 	margin: 1px;
  33. 	float: left;
  34. 	overflow:hidden;
  35. 	transition-duration: 0.5s;
  36. -webkit-transition-duration: 0.5s;
  37. 	 -o-transition-duration: 0.5s;
  38.  
  39. }
  40.  
  41. .slupek:hover {
  42. 	width:30px;
  43. }
  44.  
  45. .dane {
  46. 	background: transparent;
  47. 	font-size:10px;
  48.  
  49. 		transform:translateX(-50%) rotate(-90deg);
  50. -webkit-transform:translateX(-50%) rotate(-90deg) ;
  51. 	 -o-transform:translateX(-50%) rotate(-90deg) ;
  52.  
  53. 		transition-duration: 0.1s;
  54. -webkit-transition-duration: 0.1s;
  55. 	 -o-transition-duration: 0.1s;
  56. }
  57.  
  58. .dane:hover {
  59. 	font-size:20px;	
  60.  
  61. 	transform:translateX(-50%) rotate(0deg) ;
  62. -webkit-transform:translateX(-50%) rotate(0deg) ;
  63. 	 -o-transform:translateX(-50%) rotate(0deg) ;
  64. }
  65.  
  66. .va {
  67. 	padding-top:50%;
  68. 	text-align: right;
  69. 	background:transparent;
  70.  
  71. 	transition-duration: 0.1s;
  72. -webkit-transition-duration: 0.1s;
  73. 	 -o-transition-duration: 0.1s;
  74. }
  75.  
  76. .va:hover{
  77. 	padding-top:0px;
  78. 	text-align: center;
  79. 	margin-left:14px;	
  80. 	font-weight: 600;
  81. }
  82.  
  83. </style>
  84.  
  85. </head>
  86.  
  87. <body>
  88.  
  89.  
  90. <div style="margin:20px; height:420px; width:400px; border:solid 1px #34495e;;">
  91.  
  92. <div class="slupek" style="height:200px; transform:translateY(200px);">
  93. 	<div class="dane" style="height:200px; width:200px; ">
  94. 	    <p class="va" style="height:200px; width:200px; ">200</p>
  95. 	</div>
  96. </div>
  97.  
  98. <div class="slupek" style="height:300px; transform:translateY(100px);">
  99. 	<div class="dane" style="height:300px; width:300px; ">
  100. 	    <p class="va" style="height:300px; width:300px; ">300</p>
  101. 	</div>
  102. </div>
  103.  
  104. <div class="slupek" style="height:400px; transform:translateY(0px);">
  105. 	<div class="dane" style="height:400px; width:400px; ">
  106. 	    <p class="va" style="height:400px; width:400px; ">400</p>
  107. 	</div>
  108. </div>
  109.  
  110. </div>
  111. </body>
  112. </html>
[HTML] pobierz, plaintext