We Keep Coding

When two elements use transform to move at the same time, why there is a gap in the middle?

Here is my bug demo:
https://jsbin.com/gijabuseca/edit?html,css,js,output
bug img
Is it a browser bug?
I solved this problem by replacing transform: translateX (100%) with left: 100%
However, using left to change the position performance is much lower than transform. If insist on using transform, is there a way to solve this gap problem?

A hack around this bug can be changing slightly the movement of div 1.
Offsetting a litle bit the timing function from what the standard ease value is, we adjust it closer to div2.
I have set the transition slower so that it is easier to see if it fails
setTimeout(function(){
document.querySelector('.demo1').classList.add('right');
document.querySelector('.demo2').classList.add('right');
});
body {
background: green;
}
.wrapper {
position: relative;
width: 100px;
}
.demo1, .demo2 {
position: absolute;
width: 100%;
height: 100px;
background: #ddd;
transition: 4s;
}
.demo1 {
transform: translateX(0);
transition-timing-function: cubic-bezier(.23, 0.12, .25, 1.05);
}
.demo2 {
transform: translateX(100%);
}
.demo1.right {
transform: translateX(100%)
}
.demo2.right {
transform: translateX(200%);
}
<div class="wrapper">
<div class="demo1"></div>
<div class="demo2"></div>
</div>

Webkit Keyframes: Calculate translate amount using JavaScript or other

Take a look at this simple JsFiddle I created.
What it does is simply inserts a new li element with a slide effect from left, when the ul display is on flex and inline-block.
Something similar to that is Stackoverflow chat avatars when someone joins.
#-webkit-keyframes enter {
0% { /*opacity:0;*/ -webkit-transform: translateX(-100%); }
100% { /*opacity:1;*/ -webkit-transform: translateX(0px); }
}
#-webkit-keyframes moves {
0% { /*opacity:0;*/ -webkit-transform: translateX(-50px); }
100% { /*opacity:1;*/ -webkit-transform: translateX(0px); }
}
in my enter animation, I start with translate -100% because I want my item come from left distanced by his size.
and in the moves animation, I want to move the whole ul to the right, by the size of the entering element.
Now I set it hard-coded, to 50px because my elements are set to 50px:
li {
width: 50px;
height: 50px;
display: inline-block;
background-color: red;
}
How can I make it calculate the width OR height automatically, on how much to translate the ul?
Example: Calculate these 50px automatically

You can do this by animating only the added element by using negative margin:
setTimeout(() => {
var item = $("<li></li>").addClass("enter");
$("ul").prepend(item).addClass('move');
}, 2000);
ul {
display: flex;
transition-timing-function: ease-out;
transition: all .2s;
}
li {
--h:50px;
width: 50px;
height: var(--h);
display: inline-block;
background-color: red;
}
.enter {
animation: enter 1s;
}
#keyframes enter {
0% {
transform: translateX(-100%);
margin-left: calc(var(--h) * -1);
}
100% {
transform: translateX(0px);
margin-left: 0
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="my-flex-thing">a</li>
<li class="my-flex-thing">b</li>
</ul>

Blurryt text by transform: Rotate in Chrome

I have a list Hexagons In my web page like this
I had to use transform:rotate to have a correct text in it but in chrome text is Blurry ,in Mozilla it shows correctly
I searched a lot but there were no exact way.
I used this article to make these hexagons
http://www.queness.com/resources/html/css3-hexagon/index.html
and this is my html
<div class="hex hex-3">
<div class="inner">
<h4>Energy</h4>
<hr />
<p>
</p>
</div>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
and some part of css which I used transform:rotate in it
.hex {
transform: rotate(30deg);
-webkit-transform:rotate(30deg);
}
.inner {
transform: rotate(-30deg);
-webkit-transform:rotate(-30deg);
}
.hex .corner-1 {
z-index: -1;
transform: rotate(60deg);
}
.hex .corner-2 {
transform: rotate(-60deg);
}
.hex .corner-1:before {
transform: rotate(-60deg) translate(-87px, 0px);
transform-origin: 0 0;
}
.hex .corner-2:before {
transform: rotate(60deg) translate(-48px, -11px);
bottom: 0;
}
any idea how to fix it?

Have been busy and it took me a while to find out but following css solves the issue:
.hex .corner-1,
.hex .corner-2,
.hex .corner-1:before,
.hex .corner-2:before {
backface-visibility: inherit !important;
}
I was just having a similiar issue with a project that had a skewY tranform and found the bug while working on that, though in my project it was caused by a unnecessary rotateZ(0) transform.

Animating a div on hover css - possible loop

Wordpress site using Bootstrap framework
.test {
position: absolute;
z-index: 9;
left: 50%;
height: 10em;
width: 10em;
margin-left: -5em;
background-size: cover;
opacity: 0;
transition: opacity 0.5s ease;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.linkage:hover + .test {
opacity: 1;
}
<div class="row">
<div class="col-md-12 indx-img" style="background-image:url('...');">
Link
<div class="test"> Test </div>
</div>
</div>
Right now my site has the div 'test' show up (opacity 1) vertically/horiz centred when the the link 'linkage' is hovered on (linkage is 100% height and width of the container).
I want to animate the 'test' div as it fades in on hover. I was thinking using scale (on hover the div scales down to its original size then scales up on fade out) or something. Unless anyone has a cooler idea

It seems like you are looking for something like the below snippet (a transition and not animation). On hover of the link, the .test is being scaled up two times its original size both along X and Y axes and on mouse out it is brought back to its normal size.
.test {
position: absolute;
z-index: 9;
left: 50%;
top: 50%; /* added as I think this was missed in your code */
height: 10em;
width: 10em;
margin-left: -5em;
background-size: cover;
background: url(http://lorempixel.com/500/500); /* added for image */
opacity: 0;
transition: all 0.5s ease; /* modified to transition all property changes */
/* added to scale up the div with the center as the origin */
transform-origin: 50% 50%;
transform: translateY(-50%) scaleX(2) scaleY(2);
}
.linkage:hover + .test {
opacity: 1;
transform: translateY(-50%) scaleX(1) scaleY(1); /* bring back to normal state */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="row">
<div class="col-md-12 indx-img" style="background-image:url('...');">
Link
<div class="test">Test</div>
</div>
</div>
Alternately, you could use matrix transforms also. Equivalent of translateY(-50%) scaleX(2) scaleY(2) would be matrix(2, 0, 0, 2, 0, -101) and that of translateY(-50%) scaleX(1) scaleY(1) would be matrix(1, 0, 0, 1, 0, -101).

Well this will never be true:
.linkage:hover + .test {
opacity: 1;
}
as linkage (hovered or not) is not a sibling of test.
.test is absolutely positioned, but has no parent element that is not static. Did you want to to be absolute to the body? You use left/margin to horizontally center, and it looks like you are trying to use translateY to vertically center, but you never specify top. Perhaps consolidating to one method?
top:50%; left:50%; transform: translateX(-50%) translateY(-50%);

Flip text with javascript

I had a button that rotated text along the Y axis , giving it a mirrored look. This no longer works for some reason because the button has been placed on the child (popup) and the text to be mirrored is on the parent.
Is there a javascript function i could use to rotate the text on the parent when a button is clicked / rotate it back when its clicked again. (preferably a toggle switch)
This is what I originally had when it was only one the parent page:
HTML link :
<li><a class="button small icon-text-height flipx" href="#" onclick="return false;"></a></li>
The CSS for the div with the text:
article .teleprompter
{
padding: 300px 50px 1000px 100px;
font-size: 30px !important;
line-height: 86px;
z-index: 1;
background-color: #141414;
-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);
}
The CSS for the flipx part:
article .teleprompter.flipx
{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
z-index: 1;
pointer-events: none;
padding: 300px 50px 1000px 100px !important;
}
JS I Think should work:
<script>
function flipTXT(color)
{
if (parent_window && !parent_window.closed) {
parent_window.document.getElementById("teleprompter").style['-webkit-transform'] = rotateY(180deg);
}
}
</script>

I think one of the two solutions seen in the code at Bin below may work for you:
http://jsbin.com/buqexusamuda/1/
HTML
<p>Card: Flip</p>
<div class="card" href="#">Hello</div>
<p>Card 2: Mirror</p>
<div class="card card2" href="#">Hello</div>
CSS
.card, .card2 {
position: relative;
animation: all 2.5s;
perspective: 1000;
transition: 0.6s;
transform-style: preserve-3d;
width: 90px;
height: 32px;
text-align: center;
line-height: 32px;
z-index: 1;
background-color: #ccc;
color: #666;
}
.card2 { transform-origin: right center; }
.card.flip { transform: rotateY(180deg); }
SCRIPT
jQuery(".card").click(function(){
$(this).toggleClass("flip");
});

The simplest solution would be to use jQuery to add/remove the classes. If you can include jQuery, then you can do something along these lines:
<script>
$(document).ready(function(){
//Since the text is on the parent, you need to access it.
var parentWindow = window.opener;
//This gets the parent's DOM so you can grab the text from the parent window.
var parentDom = parentWindow.document;
//This grabs the text you want to transform.
var targetText = parentDom.getElementsByClassName("teleprompter");
//This toggles the class
$(".button").on('click', function(){
$(targetText).toggleClass("flipx");
});
});
</script>
I used a combination of jQuery and regular javascript so you don't have to roll your own code to add/remove and check for classes.
Here's the code to include jQuery in your page in case you don't have it handy:
This one will work with older non-HTML 5 compliant browsers and modern browsers.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
This one will only work with more modern browsers:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>