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

2016-07-28 20:58:27 +08:00
 fetich

示例代码

<!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 度？
提前谢谢回答的前端前辈了。

2008 次点击
所在节点    问与答
3 条回复
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 谢谢两位，从坑里爬出来了。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/295605

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX