变换缩放 [英] transform scale after rotate

问题描述

我有一个问题。我旋转一个div 45度。然后，我想要在新的y轴上进行缩放 http://jsfiddle.net/P37g5/2/

你可以这样封装你的对象：

你可以这样封装你的对象：

CSS

  span {
 margin：50px 0 0 50px; 
 float：left; 
 width：28px; 
 height：28px; 
 background：rgba（240,240,240,1）; 
 border-top：1px solid black; 
 border-right：1px solid black; 
 -moz-transform：rotate（45deg）; 
 -webkit-transform：rotate（45deg）; 
} 
 div {
 -moz-transform：scale（1,5）; 
 -webkit-transform：scale（1,5）; 
} 
  

HTML

 < div> 
< span>< / span> 
< / div> 
  

（在jsFiddle上查看）

I have a problem. I am rotating an div 45 degrees. I then want to scale it on the new y axis http://jsfiddle.net/P37g5/2/ - not the y axis that is now at 45 degrees?

解决方案

You can wrap your object like this:

CSS

span {
    margin: 50px 0 0 50px;
    float: left;
    width: 28px;
    height: 28px;
    background: rgba(240,240,240,1);
    border-top: 1px solid black;
    border-right: 1px solid black;
    -moz-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg);
}
div{
    -moz-transform:scale(1, 5); 
    -webkit-transform:scale(1, 5);
}

HTML

<div>
    <span></span>
</div>

(View on jsFiddle)

这篇关于变换缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！