How to Reset CSS3 *-Transform: Translate(…)

How to reset CSS3 *-transform: translate(…)?

As per the MDN documentation, the Initial value is none.

You can reset the transformation using:

div.someclass {
    transform: none;
}

---

Using vendor prefix:

div.someclass {
    -webkit-transform: none; /* Safari and Chrome */
       -moz-transform: none; /* Firefox */
        -ms-transform: none; /* IE 9 */
         -o-transform: none; /* Opera */
            transform: none;
}

Reset CSS transform origin after translation / rotation

Resetting the transform origin, as you say is hard

However, you can keep adding transforms on the right side, with the previous ones unchanged, and you'll get what you want.

(As a side note, in a snippet you don't need the body element in the HTML, and the styles are better placed in the CSS editor.)

.tri-bx {

  animation-name: start;

  animation-duration: 5s;

  animation-iteration-count: infinite;

}

@keyframes start {

  0% {

    transform: rotate( 0deg);

  }

  33% {

    transform: rotate( 315deg);

  }

  66% {

    transform: rotate( 315deg) translate( 0, -5rem) rotate(0deg);

  }

  100% {

    transform: rotate( 315deg) translate( 0, -5rem) rotate( 405deg);

  }

}

html,

body {

  height: 100%;

  margin: 0;

  padding: 0;

}

body {

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: #fdfdfd;

  color: #aaa;

  font-family: Arial, 'sans-serif';

  font-size: 0.8rem;

  letter-spacing: 0.1rem;

}

.tri {

  width: 0;

  height: 0;

  border-left: 1rem solid transparent;

  border-right: 1rem solid transparent;

  border-bottom: 1rem solid #555;

  transform: scaleY( 2);

  border-radius: 50%;

}

.status,

.instr {

  position: absolute;

}

.status {

  top: 0;

}

.instr {

  bottom: 0;

}

<div class="tri-bx">

  <div class="tri"></div>

</div>

Is there a CSS3 Reset?

The real way to solve your problem is either to use the scoped attribute, or to create your widget using the Shadow DOM.

This way, you can insulate yourself from external CSS. Unfortunately, neither are really ready for use, so yes, you'll have to manually protect yourself.

The alternative is to set everything (transform, font-size, padding, etc) in your code with !important, rather than resetting it to 0/none, then setting it anew.

CSS3 Translate % Units?

Simple answer - that is in fact the right behavior. If you want to use relative units in translate transforms consider using viewport length units instead.

Use transform to translate a node until it reaches it's parent's position

You can add more than one transform, and they can be of the same function:

@keyframes scroll {
    0% {
        transform:translateX(0%);
    }
    100% {
        transform:translateX(10px) translateX(-100%);
    }
}

Will set the remaining space to 10px

fiddle

You can do what you want (translate the span until the right border adjusts to the container div border) using a wrapper (another one).

I have created a simple demo so that you can see the technique.

For this HTML

<table>
    <tr>
        <td>How to Reset CSS3 *-Transform: Translate(…)aa</td>
        <td><div><span>How to Reset CSS3 *-Transform: Translate(…)aa bbbbbb ccccc dddddd</span></div></td>
        <td>How to Reset CSS3 *-Transform: Translate(…)aa</td>
    </tr>
    <tr>
        <td>How to Reset CSS3 *-Transform: Translate(…)aa</td>
        <td><div><span>How to Reset CSS3 *-Transform: Translate(…)aa bbbbbb ccccc dddddd  eee fff ggg hhh jjjjj j</span></div></td>
        <td>How to Reset CSS3 *-Transform: Translate(…)aa</td>
    </tr>
</table>

The CSS is

table {
    width: 356px;
    table-layout:fixed;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;    
    border:1px solid black;
    padding:5px;
    position: relative;
}

div {
    border: solid 1px red;
    width: 100%;
    transition: all 2s;
}
span {
    display: inline-block;
    background-color: rgba(160,255,200,0.4);
    transition: all 2s;
}
td:hover div {
   -webkit-transform: translateX(100%);
}
td:hover span {
    -webkit-transform: translateX(-100%);
}

The first wrapper (the div) is set to 100% width. translating it to 100% sets its left border to the right of the parent.
Now, translating the span -100%, moves the right border to the left border of the div, and so to the right border of the td.

fiddle

The div and the span have colored border and background so that the effect is visible.

IE/Edge not applying transform: translate to table row

As defined in the spec, transformable-elements includes elements whose display property computes to table-row. As such, you are correct to expect transform to relocate table rows on the screen. Microsoft Edge appears to lack this support.

Edge does, however, translate table cells. This may provide temporary relief for the time being. I am going to work up a few tests to ensure that we are accurately implementing this functionality.

---

Related Topics