css3 旋转和缩放问题

V2EX = way to explore

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

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

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

此处输入图片的描述如图所示:没有旋转的时候拖拽四个控点进行缩放是正确的，但是旋转之后，再进行缩放，缩放的方向就不对了。求解决这个问题的思路。缩放我是改变left，top值做的、旋转是用CSS3的matrix做的，还有就是旋转之后，四个角的cursor也不对了

第 1 条附言 · 2015-04-24 20:54:43 +08:00

![](http://www.webfed.cn/static/webapp/static/images/3.gif)

CSS3

旋转

缩

8 条回复 • 2015-04-24 20:55:38 +08:00

zoverdoser

2015-04-24 11:08:24 +08:00

transform-origin: center;?

bsbgong

2015-04-24 11:39:51 +08:00

就是楼上说的

adspe

2015-04-24 11:46:56 +08:00

transform-origin:50% 50%;

ffx0s

2015-04-24 12:00:19 +08:00

@zoverdoser
@bsbgong
就像PS里的缩放和旋转一样，假如旋转了45度角后，再点击右下角的控点进行缩放，此时是以右下角正对角的控点为原点进行缩放的。transform-origin: center这个应该不行吧。感觉用这个会更复杂。

bsbgong

2015-04-24 15:53:32 +08:00

@ffx0s
根据你的问题描述，是元素执行变换时的原点问题
那就是使用transform-origin这个属性
具体设置的话，根据你的设计，是保存了四个角的坐标并绑定了拖拽事件的
那么就在事件中设置元素的属性：
transform: scale
transform-origin: 对角点的坐标

ffx0s

2015-04-24 16:03:16 +08:00

@bsbgong http://jsfiddle.net/fabricjs/6ydPq/ 我想要的效果是这样的，当然他这个是用canvas做的。我现在缩放改变的是width，height，left，和top。没有用scale。实际效果和这个网站一样的： http://www.polyvore.com/cgi/app

bsbgong

2015-04-24 19:50:51 +08:00

@ffx0s
http://jsfiddle.net/fabricjs/6ydPq/ 我看这个里面也是设置的origin
基于你现有的left/top的方案，我觉得不可行。因为只靠这一类CSS属性的话，你无法控制浏览器绘制一个元素的原点，没有这个接口。
建议换用transform。
1. transform在动画性能上更高
2. origin属性可以简单地解决你的难点

ffx0s

2015-04-24 20:55:38 +08:00

@bsbgong http://www.webfed.cn/static/webapp/static/images/3.gif 用scale缩放的话，控点也会变小。