Jump to content

CSS3 trasnform & radio buttons


goggy

Recommended Posts

I came across a problem. I'm making a web quiz as an assigment using only html5, css3 & JavaScript (if necessery). I want to make it a little more fancy using 3d-animations which are (as far as I know) currently only supported by Safari. Now here comes my problem. On one of my pages there's a question and then 4 possible answers. You select the right one with a radio-button. Now as long as you don't use any transformations or something similar everything works (and looks) fine, but when you do a transformation like

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />    <title>Title</title>    <style type="text/css">        body {            background-color: black;            font-family: 'Arial';        }        #stage {            width: 700px;            height: 700px;            margin: 50px auto;            padding: 40px;            background-color: white;            -webkit-border-radius: 50px;            -moz-border-radius: 50px;            -o-border-radius: 50px;            text-align: center;            -webkit-transform: rotate(10deg);            -moz-transform: rotate(10deg);            -o-transform: rotate(10deg);        }    </style>    </head>    <body>        <div id="stage">            <div id="mainpage">                <h3>One million $ question is...</h3>                <div id="question">                    <input type="radio" id="radio1" name="group"></input>                    <label for="radio1">What day is today?</label><br/>                    <input type="radio" id="radio2" name="group"></input>                    <label for="radio1">Why did chicken cross the road?</label><br/>                    <input type="radio" id="radio3" name="group"></input>                    <label for="radio1">Knock, knock...</label><br/>                    <input type="radio" id="radio4" name="group"></input>                    <label for="radio1">How much wood would a woodchuck chuck?</label>                </div>            </div>        </div>    </body></html>

If you comment out the transform line(s) the radio-buttons will reappeare.With regards Goran.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...