Fire CSS3 Transform from Javascript button click

Soy nuevo en las transiciones de CSS3. Estoy tratando de hacer una presentación de diapositivas de imágenes solo para webkit. hay 3 imágenes alineadas una al lado de la otra dentro de un DIV ancho. Este DIV ancho está dentro de un contenedor DIV. La propiedad de desbordamiento Whoose se ha establecido como oculta. el ancho del contenedor DIV es igual a cada image, por lo tanto, el usuario puede ver solo una image a la vez.

aquí está el HTML y CSS para eso.

HTML

<div id = "imageHolder"> <div id="slide1_images"> <img src="./images/fish.jpg" /> <img src="./images/desert.jpg" /> <img src="./images/space.jpg" /> </div> </div> 

CSS

  #imageHolder { width: 320px; height: 240px; border: 1px solid grey; overflow: hidden; position: relative; } #slide1_images { position:absolute; left:0px; width:960px; -webkit-transition: -webkit-transform 0.5s; } 

Ahora agregué un selector de desplazamiento de CSS en el código solo para probar la transición. cuando el usuario se desplaza sobre la image (el DIV interno, para ser precisos), el set se mueve a la izquierda en 320 píxeles (que es el ancho de cada image).

CSS para hover

  #slide1_images:hover { -webkit-transform:translate(-320px,0); } 

Hasta esto, el código funciona perfectamente, cuando muevo el mouse sobre la primera image, el set se mueve hacia la izquierda y la segunda image se adapta perfectamente a la DIV externa.

Lo que quiero es que, para realizar la misma acción, click el button JavaScript. He agregado un button llamado btnNext en mi página. ¿Cómo puedo activar la traducción desde el evento de clic de button? Intenté el siguiente pero no funciona.

Javascript

  <script type = "text/javascript"> function btnNext_clicked() { document.getElementById("slide1_images").style.-webkit-transform = "translate(-320px,0)" } </script> 

¡Estoy seguro de que he hecho algo estúpido! ¿podría ayudarme a solucionar la function Javascript? Muchas gracias por adelantado 🙂

Con la advertencia obvia es solo para browseres webkit que solo necesitas usar

 .style["-webkit-transform"] = .. 

as - no se puede usar en un nombre de style.-webkit-transform en línea aquí: style.-webkit-transform

Desde JavaScript, puede acceder -webkit-transform propiedad -webkit-transform de esta manera:

 var style = document.getElementById("slide1_images").style; style.webkitTransform ='translateX(-320px)'; 

Puede hacerlo compatible con varios browseres accediendo a las siguientes properties:

 transform webkitTransform MozTransform OTransform msTransform