İnceliyorum hocam biraz bekleteceğim.
Merhaba bişeyler denedim ama kodları ekliyorum css konusunda hiç iyi değilim
resimde gösterdiğim en yakın sonucu bu şekilde aldım ama stabil birşey değil malesef.
<style>
#resim {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-45px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi {
float: left;
display: inline-block;
margin-left:-48px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#resim1 {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-77px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi1 {
float: left;
display: inline-block;
margin-left:-80px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#resim2 {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-79px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi2 {
float: left;
display: inline-block;
margin-left:-82px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#resim3 {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-79px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi3 {
float: left;
display: inline-block;
margin-left:-82px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#resim4 {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-79px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi4 {
float: left;
display: inline-block;
margin-left:-82px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
</style>
</head>
<body>
<div id="yazi">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim" /></div>
<div id="yazi1">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim1" /></div>
<div id="yazi2">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim2" /></div>
<div id="yazi3">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim3" /></div>
<div id="yazi4">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim4" /></div>