HTML5 translate relative to page_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-02 08:43 出处：网络

How can you apply a translate to an element but make it move to a point on the page rather than relative to itself?

For example, in the code below the "card" elements will move 50, 100 relative to their starting position. What I want instead is for it to move to the center of the page.

<html>
<head>
<style>

.face {
    -webkit-backface-visibility: hidden;
    position: absolute;
    height: 140;
    width: 80;
    overflow: hidden;
}

.card {
    height: 100;
    width: 80;
    float: left;
    -webkit-box-shadow: 0px 2开发者_如何学JAVApx 6px rgba(0, 0, 0, 0.5);
    margin-left: 5px;
     -webkit-transition-property: transform;
     -webkit-transition-duration: 0.25s;
     -webkit-transition-timing-function: ease-out;
}

.activated {
    -webkit-transform: scale(2) translate(50px, 100px);
     -webkit-transition-duration: 0.35s;
     -webkit-transition-timing-function: ease-in;
}

</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>

$(document).ready(function () {
    $('.card').click(function (e) {
        e.preventDefault();
        $(this).toggleClass("activated");
    });
});

</script>
</head>

<body>

<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>

<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>

<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>

<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>


</body>
</html>

I don't think you should be using translate() for that. I suppose you could simply calculate the correct values or manipulate the transform-origin using JavaScript, but that kind of defeats the purpose of using CSS transforms.

You can animate properties as well, so you could remove the translate() from .activate and change the transition property for .card to:

-webkit-transition-property: all;

You can then use "regular" CSS to do the positioning and the transition will do the rest. E.g. add these properties to .activated:

position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -40px;

There is rather a bit of a problem with that, though. While CSS can smoothly transition the top, left and margin properties nicely, it can't smoothly transition the position property, so when a card gets activated it'll jump to the top left first and then move smoothly to the center of the page.

I'm not sure if there's a solution to that other than positioning the original cards absolutely as well.

Also, using the translate(), the position of the other cards isn't affected when you activate one of them. In my example, though, the activated card is taken out of the flow, so the other cards will move left to fill up the gap (as floating elements do). That might not be what you want either. That wouldn't happen if you absolutely position all of them to start with, though.

Of course, there are plenty of questions in the specs themselves about issues like this considering they're still experimental: