css3 transformation d'échelle sur la div parent, mais en gardant constante la taille de certains des associés divs

Je suis en utilisant css3 transformation d'échelle à l'échelle d'un div qui contient d'autres divs à l'intérieur.

Le problème que j'ai, c'est que certains de l'intérieur de la divs j'ai besoin de garder comme ils étaient, en fait comme si ils n'étaient pas mis à l'échelle, leur taille ne doit pas changer, cependant j'ai besoin à l'échelle de la div parent avec tout le reste à l'intérieur.

Comment pouvez-vous inverser la mise à l'échelle dans certains des divs?

Je suis en train d'appliquer une inversion de la mise à l'échelle.

Si l'ensemble de la div a appliqué une valeur de 1,5 , j'essaie de trouver quelle valeur je dois maintenant échelle les autres divs pour revenir visuellement à la façon dont ils ont regardé à l'avant.

OriginalL'auteur Javier Gonzalez | 2013-03-21

  1. 16

    Si le div parent a été mis à l'échelle par un facteur de 1.5, alors vous avez besoin à l'échelle de la les enfants par un facteur de 1/1.5 = 0.(6) pour garder leur taille constante.

    exemple

    En général, afin de les annuler pour un élément enfant d'une transformation d'échelle qui a été appliqué sur la mère et a un facteur d'échelle de a, vous avez besoin d'appliquer une autre transformation d'échelle de facteur 1/a sur l'enfant lui-même.

    Vous devez soit:

    • calculer manuellement le facteur d'échelle avant de faire quoi que ce soit d'autre, puis l'utiliser comme il est dans votre code (exemple ci-dessus)
    • utiliser un préprocesseur pour gérer cela pour vous (SASS exemple)
    • utiliser JavaScript pour calculer le facteur d'échelle nécessaires pour l'enfant et
      pour définir l'échelle transform sur l'enfant
    +1 et je dois dire que j'ai amour le CSS 3D démos lié à votre profil 🙂
    Ou vous pouvez utiliser calc() et -webkit-calc() pour effectuer les calculs =)
    Yup, c'est une bonne idée. Triste est que le support n'est pas très bonne. Ne fonctionne qu'est google Chrome à partir de la version 37 ou 38 et de l'Opéra est évidemment de fuite, mais il ne fonctionne pas dans Firefox ou IE.

    OriginalL'auteur Ana

  2. 1

    L'inverse de tout à l'échelle de l'opération est 1 /<scale> par la mise à l'échelle du conteneur par 1.5 vous auriez besoin à l'échelle de la les enfants par 1 /1.5 = 0.6

    Malheureusement, selon les spécifications que vous ne peut tout simplement pas utiliser les CSS comme:

    transform: scale(1/1.5);

    car l'échelle est définie comme mise à l'échelle(<nombre> [;, <nombre>])

    où <nombre> est

    un ou zéro, un ou plusieurs chiffres après la virgule suivi d'un point (.) suivi par un ou plusieurs chiffres décimaux

    De sorte que vous aurez à faire le calcul vous-même ou qu'il pourrait utiliser une feuille de style dynamique de la langue comme MOINS qui prend en charge ce genre de les opérations de.

    Démo (webkit seulement)

    OriginalL'auteur andyb

  3. 0

    Si vous, comme le suggère d'utiliser l'inversion du facteur d'échelle, puis remarque que l'enfant n'a pas nécessairement garder sa taille d'origine pendant l'échelle de transformation -- c'est important, bien sûr, seulement si vous permettez à l'échelle transforme une durée (par exemple en utilisant transition: transform;).

    Toutes les idées sur la manière d'aborder ce problème?

    OriginalL'auteur Goran W