初级前端 transform 问题——应用 transform-origin 后，如何让动画从原变换恢复

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3058 天前的主题，其中的信息可能已经有所发展或是发生改变。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TRANSFORM</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        p {
            width: 100%;
            height: 100%;
            outline: 1px solid red;
            transition: transform 5s;
        }
        .transformed:hover {
            transform: rotate3d(0, 0, 1, 360deg);
            transform-origin: 100% 100% 0;
            background-color: pink;
        }
        .container {
            margin: 50px auto;
            width: 250px;
            height: 250px;
            border: 1px solid red;
            perspective: 600px;
        }
    </style>
</head>
<body>
    <div class='container'>
        <p class="transformed">P2</p>
    </div>
</body>
</html>

CodePen

初始阶段，粉色背景以右下角为中心，顺时针旋转 360 度。随后移开鼠标，就可以看见恢复过程是以默认中心（ 50%， 50%）进行的，请问如何使其按原变换方式恢复，即以右下角为中心，逆时针旋转 360 度？
提前谢谢回答的前端前辈了。

3 条回复 • 2016-07-28 22:11:57 +08:00

LWXYFER

2016-07-28 21:23:14 +08:00

```
p {
width: 100%;
height: 100%;
outline: 1px solid red;
transition: transform 5s;
transform-origin: 100% 100% 0;
}

.transformed:hover {
transform: rotate3d(0, 0, 1, 360deg);
background-color: pink;
}
```

origin ===》

chiv2

2016-07-28 21:44:08 +08:00

你把 origin 定义到 hover 上了，所以失去 hover 事件时就导致原点重置。

fetich

2016-07-28 22:11:57 +08:00

@LWXYFER
@chiv2 谢谢两位，从坑里爬出来了。