CSS3 Transition - Change Animation "Anchor Point"

CSS3 transition - change animation anchor point?

I think you might be looking for the transform-origin property.
This allows you to say something like:

transform-origin:left top;

You can find more information about it here:
http://www.w3schools.com/cssref/css3_pr_transform-origin.asp

Hope this helps!

Scrolling to an Anchor using Transition/CSS3

While some of the answers were very useful and informative, I thought I would write down the answer I came up with. The answer from Alex was very good, it is however limited in the sense that the height of the div needs to be hard coded in the CSS.

So the solution I came up with uses JS (no jQuery) and is actually a stripped down version (almost to the minimum) of over solutions to solve similar problems I found on Statckoverflow:

HTML

<div class="header">
    <p class="menu"><a href="#S1" onclick="test('S1'); return false;">S1</a></p>
    <p class="menu"><a href="#S2" onclick="test('S2'); return false;">S2</a></p>
    <p class="menu"><a href="#S3" onclick="test('S3'); return false;">S3</a></p>
    <p class="menu"><a href="#S4" onclick="test('S4'); return false;">S3</a></p>
</div>
<div style="width: 100%;">
    <div id="S1" class="curtain">
    blabla
    </div>
    <div id="S2" class="curtain">
    blabla
    </div>
    <div id="S3" class="curtain">
    blabla
    </div>
    <div id="S4" class="curtain">
    blabla
    </div>
 </div>

NOTE THE "RETURN FALSE;" in the on click call. This is important if you want to avoid having your browser jumping to the link itself (and let the effect being managed by your JS).

JS code:

<script>
function scrollTo(to, duration) {
    if (document.body.scrollTop == to) return;
    var diff = to - document.body.scrollTop;
    var scrollStep = Math.PI / (duration / 10);
    var count = 0, currPos;
    start = element.scrollTop;
    scrollInterval = setInterval(function(){
        if (document.body.scrollTop != to) {
            count = count + 1;
            currPos = start + diff * (0.5 - 0.5 * Math.cos(count * scrollStep));
            document.body.scrollTop = currPos;
        }
        else { clearInterval(scrollInterval); }
    },10);
}

function test(elID)
{
    var dest = document.getElementById(elID);
    scrollTo(dest.offsetTop, 500);
}
</script>

It's incredibly simple. It finds the vertical position of the div in the document using its unique ID (in the function test). Then it calls the scrollTo function passing the starting position (document.body.scrollTop) and the destination position (dest.offsetTop). It performs the transition using some sort of ease-inout curve.

Thanks everyone for your help.

Knowing a bit of coding can help you avoiding (sometimes heavy) libraries, and giving you (the programmer) more control.

Continue Transition from where Animation Ended

You can consider the same effect differently in order to avoid this bad effect:

Here is an idea using background animation where the trick is to change the position only after the size has changed.

.button {  position: relative;  display: inline-block;  color: #000;  border: 2px solid #000;  padding: 10px 24px;  font-size: 20px;  font-weight: 600;  text-align: center;  text-decoration: none;  background-image:linear-gradient(#000,#000);  background-size:0% 100%;  background-position:left;  background-repeat:no-repeat;  background-origin:border-box;  transition:color 0.3s, background-size 0.3s, background-position 0s 0.3s;}.button:hover {  color:#fff;  background-size:100% 100%;  background-position:right;}

<div class="button">Some text</div>

How can I set a rotation point for an element in CSS?

This will set the rotation pivot point on top-left corner of your element and rotate it:

transform: rotate(-25deg);
transform-origin: 0% 0%;

take a glance at .nav_item_txt class:

http://jsfiddle.net/KHkX7/

How can I change the pivot on my rotateZ animation?

You need to specify the transform-origin to 0 50%;.

Note that transforms normaly don't apply on inline elements like <span> so I changed it's display property to inline-block; :

$(".b").on('click', function() {  $(".d").addClass('dropped')})

.d {  font-family: 'Orbitron', sans-serif;  /* font style. Default uses Google fonts */  text-shadow: 2px 2px #B4EAF3, 3px 3px #B4EAF3, 4px 4px #B4EAF3, 5px 5px #B4EAF3, 6px 6px #B4EAF3;  font-size: 4vw;  color: #207688;  letter-spacing: 15px;  font-weight: 800;  position: relative;}.d span {  display: inline-block;  transform-origin: 0 50%;}.dropped span {  transform: rotate(120deg);  color: red;  transition: all 1.3s ease-in;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class='d'>  <span>  1234567890 </span>  <input type='button' class='b' /></div>

---

Related Topics