Как переделать стиль css3 в css?

Здравствуйте. Подскажите пожалуйста вот имеется стиль слайдера в css3

 Показать / Скрыть текст

*, *:before, *:after {   margin:0;   padding:0;   -webkit-box-sizing:border-box;   -moz-box-sizing:border-box;   box-sizing:border-box; } #gal {   position:relative;   width:600px;   height:300px;   margin:0 auto;   top:100px;   background:white;   -webkit-transform:translate3d(0, 0, 0);   -moz-transform:   translate3d(0, 0, 0);   -ms-transform:    translate3d(0, 0, 0);   -o-transform:     translate3d(0, 0, 0);   transform:        translate3d(0, 0, 0); } #gal ul {list-style-type:none;} input[type="radio"] {   position:absolute;   left:0;   display:block;   width:40px;   height:75px;   border:0;   outline:none;   cursor:pointer;   opacity:0;   z-index:9;    } input[value="one"] {top:0;} input[value="two"] {top:75px;} input[value="three"] {top:150px;} input[value="four"] {top:225px;} input[type="radio"] + label {   position:absolute;   left:0;   width:40px;   height:75px;   background:#333;   z-index:7;   -webkit-transition:left .1s, width .1s;   -moz-transition:left .1s, width .1s;   -ms-transition:left .1s, width .1s;   -o-transition:left .1s, width .1s;   transition:left .1s, width .1s; } input[value="one"] + label {top:0;} input[value="two"] + label {top:75px;} input[value="three"] + label {top:150px;} input[value="four"] + label {top:225px;} [class*="entypo-"]:before {   position:absolute;   font-family: 'entypo', sans-serif; } label[class*="entypo-"]:before {   top:25px;   left:15px;   font-size:1.5rem;   color:white; } a[class*="entypo-"]:before {   top:3px;   left:3px;   font-size:1.5rem;   color:#333; } a:hover[class*="entypo-"]:before {   color:tomato; } figure, figure img, figcaption {   position:absolute;   top:0;   right:0; } figure {   bottom:0;   left:0;   width:600px;   height:300px;   display:block;   overflow:hidden; } figure img {   bottom:0;   left:0;   display:block;   width:600px;   height:300px;   -webkit-transform:translateX(600px);   -moz-transform:translateX(600px);   -ms-transform:translateX(600px);   -o-transform:translateX(600px);   transform:translateX(600px);   -webkit-transition:all .15s;   -moz-transition:all .15s;   -o-transition:all .15s;   transition:all .15s; } figcaption {   display:block;   width:300px;   height:300px;   padding-top:100px;   background:transparent;   text-align:right;   z-index:1;   -webkit-transform:translateX(300px);   -moz-transform:translateX(300px);   -ms-transform:translateX(300px);   -o-transform:translateX(300px);   transform:translateX(300px);   -webkit-transition:all .25s;   -moz-transition:all .25s;   -o-transition:all .25s;   transition:all .25s; } h4 {   display:inline-block;   padding:0 15px;   background:tomato;   color:white;   font-family: 'Titillium Web', sans-serif;   font-weight:300;   font-size:1.5rem; } figcaption nav ul {display:inline-block;padding:3px 15px;background:white;} figcaption nav ul li {display:inline-block;margin-left:5px;} figcaption nav ul li a {position:relative;display:block;width:30px;height:30px;text-decoration:none;color:white;} figcaption p {display:inline-block;padding:5px 15px;background:white;font-family: 'Titillium Web', sans-serif;font-weight:300;color:#333;} input[type="radio"]:checked + label {left:-17px;width:75px;background:tomato;} input[type="radio"]:checked + label:before {font-size:2.5rem;top:15px;left:28px;} input[type="radio"]:checked ~ figure img {   -webkit-transform:translatex(0px);   -moz-transform:translatex(0px);   -ms-transform:translatex(0px);   -o-transform:translatex(0px);   transform:translatex(0px); } input[type="radio"]:checked ~ figure figcaption {   -webkit-transform:translateX(0px);   -moz-transform:translateX(0px);   -ms-transform:translateX(0px);   -o-transform:translateX(0px);   transform:translateX(0px);   z-index:8; } h2 {   margin-top:150px;   text-align:center;   font-family: 'Titillium Web', sans-serif;   font-weight:300;   font-size:1.5rem; } h2 a {   position:relative;   color:tomato;   text-decoration:none; } h2 a:after {   content:'';   position:absolute;   bottom:-2px;   left:0;   width:0;   height:1px;   background:tomato;   -webkit-transition:width .1s;   -moz-transition:width .1s;   -o-transition:width .1s;   transition:width .1s; } h2 a:hover:after {   width:100%; } body { background: #000000 url(header.jpg) no-repeat center top;} html, body {   width:100%;   height:100%; }

Как этот стиль переделать в css? А также html код:

 Показать / Скрыть текст

              

                                                             

Tim Biskup

                               

share this with your friends

                                   

                  

                  

                                                            

      

                                                             

Brecht Vandenbroucke

                               

share this with your friends

                                   

                  

                  

                                                            

      

                                                             

Andy Martin

                               

share this with your friends

                                   

                  

                  

                                                            

      

                                                             

Diana Beltran Herrera

                               

share this with your friends

                                   

                  

                  

                                                            

       

Заранее спасибо

Источник: dle-faq.pro