worldgameplayer
Gebruiker
- Lid geworden
- 2 feb 2013
- Berichten
- 126
Beste helpmij'ers
Ik ben bezig met een website.
Ik wil een div draaien zodat het een ruit is van plaats een vierkant en dat de inhoud weer terug gedraait wordt.
alleen als ik de content in de div terug draai dan komt het in 1 punt terecht.
ik heb het in de vierkant op zijn plaats gezet.
Dit is de Body HTML code
dit is de CSS Code:
Zo moet de content in de vierkant eruit zien maar dan alleen de achtergrond vierkant div gedraaidt:
En zo moet het eruit zien alleen de content staat niet op zijn plek en ik weet niet hoe ik die goed zet:
Alvast bedankt
MvGr. Bradley
Ik ben bezig met een website.
Ik wil een div draaien zodat het een ruit is van plaats een vierkant en dat de inhoud weer terug gedraait wordt.
alleen als ik de content in de div terug draai dan komt het in 1 punt terecht.
ik heb het in de vierkant op zijn plaats gezet.
Dit is de Body HTML code
HTML:
<div class="center-both" id="Login">
<div id="Login-Content">
<img class="center-hori" src="img/cloud.png" alt="Monio Cloud Logo" height="95" width="180"/>
<div class="center-both2" id="Login-Form">
<div id="Login-Top-Wrapper">
<div class="Hint" id="UsName-Hint">
Username
</div>
<div id="UsName">
<input class="Login-Input" type="text" name="Us">
</div>
</div>
<div id="Login-Bottom-Wrapper">
<div class="Hint" id="Pasword-Hint">
Password
</div>
<div id="PsWord">
<input class="Login-Input" type="password" name="Pass">
</div>
</div>
</div>
</div>
</div>dit is de CSS Code:
Code:
*{
padding: 0;
margin: 0;
}
.center-hori{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.center-vert{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto 0;
}
.center-both{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.center-both2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Login-Input{
width: 250px;
height: 35px;
font-size: 26px;
}
body{
background-color: black;
}
#Login{
width: 400px;
height: 400px;
border-radius: 35px;
background-color: rgba(255, 255, 255, 0.3);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
div#Login-Content{
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}Zo moet de content in de vierkant eruit zien maar dan alleen de achtergrond vierkant div gedraaidt:
En zo moet het eruit zien alleen de content staat niet op zijn plek en ik weet niet hoe ik die goed zet:
Alvast bedankt
MvGr. Bradley
