Zoom-Effekt mit Css-übergang und Transformation?

Habe ich einen button mit der Größe 50 x 50. Auf schweben, ich brauche zu ersetzen, die Taste mit einem 70 x 70 Größe-Taste. Auch Der übergang sollte glatt sein.

So, ich bin versucht, die CSS-transition und transform-Funktion. Das ist, transform3d in der z-Achse.

<style>

.button1{
    position:absolute;
    top:0px;
    left:0px;
    display:inline-block;
    width:50px;
    height:50px;
    background:url(images/button.png) no-repeat;
    background-position:bottom left;
    /* Transition */
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.button1:hover{
    width:70px;
    height:70px;
    background-position:top left;
    -webkit-transform: translate3d(0, 0, 10px);
    -moz-transform: translate3d(0, 0, 10px);
    -ms-transform: translate3d(0, 0, 10px);
    -o-transform: translate3d(0, 0, 10px);
}

</style>

</head>
<body>
<a href="#" class="button1"></a>
</body>

Ich habe versucht diesen code für x und y umwandelt, und es funktioniert. Aber, es funktioniert nicht für die z-Achse.

Im Prinzip möchte ich eine glatte Lockerung der zoom-Effekt auf schweben.

Bitte vorschlagen.

InformationsquelleAutor Sangam254 | 2013-01-23

  1. 16

    Du bist über-verkompliziert das problem durch den Versuch einer Skala mit den Dimensionen und wandelt in der gleichen Zeit.

    Einfach mit einem scale Transformation zu erreichen, was Sie wollen, obwohl im großen Maßstab produzieren können Unschärfen bei Bildern und text.

    .button:hover {
    /* Un-prefixed. Prefix `transform` for all target browsers. */
    transform: scale(1.2);
    }

    InformationsquelleAutor amustill

Schreibe einen Kommentar