文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS3:如何同时旋转和缩放img？

问CSS3:如何同时旋转和缩放img？
EN

Stack Overflow用户

提问于 2013-04-02 23:39:44

回答 4查看 95.6K关注 0票数 49

我很困惑。为什么不能同时使用缩放和旋转？我试过了，但不起作用：

.rotate-img{
    -webkit-transform:scale(2,2);
    -webkit-transform:rotate(90deg);
    margin-left:20%;
    margin-top:10%;
}

我尝试过jQuery，但也不起作用：

<style>
.zoom{
        -webkit-transform:scale(2,2);
        margin-left:20%;
        margin-top:10%;
    }
</style>
<script>

    $(document).ready(function(){
        $("img").dblclick(function(){

            $(this).addClass("zoom");

            $(this).contextmenu(function(){
                $(this).css("-webkit-transform","rotate(90deg)");
                return false;
            })
        });
    })

    </script>

我怎么能缩放一个img，当我循环右击，然后旋转90度。

javascript

jquery

css

css-transforms

回答 4

Stack Overflow用户

发布于 2013-04-02 23:45:54

使用具有rotate(**deg)值的transform属性，可以使用CSS旋转图像

.rotate-img {
    -webkit-transform : rotate(90deg) scale(0.2); /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform     : rotate(90deg) scale(0.2); /* IE 9 */
    transform         : rotate(90deg) scale(0.2); /* Firefox 16+, IE 10+, Opera */
    left : -200px;
    position: relative;
}

<img class="rotate-img" src="https://appharbor.com/assets/images/stackoverflow-logo.png" />

当在多行上应用transform时，它就像任何其他CSS属性一样，它会被覆盖，所以只使用最后一行，就像下面这样：

.myclass {
    top: 100px;
    top: 400px;
}

只有最后一个可以应用，所以你需要把所有的转换放在一个transform中。

票数 78

Stack Overflow用户

发布于 2014-03-28 05:47:13

好吧，基于adeneo的答案，一个包含所有支持CSS transform的浏览器的答案。

.rotate-img {
    -webkit-transform: rotate(90deg) scale(2.2); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
       -moz-transform: rotate(90deg) scale(2.2); /* Fx 3.5-15 */
        -ms-transform: rotate(90deg) scale(2.2); /* IE 9 */
         -o-transform: rotate(90deg) scale(2.2); /* Op 10.5-12 */
            transform: rotate(90deg) scale(2.2); /* Fx 16+, IE 10+ */
    margin: 10% 0 0 20%;
}

请参阅扩展JS Fiddle。

票数 14

Stack Overflow用户

发布于 2019-12-08 18:21:35

你不需要单独编写代码来同时使用旋转和缩放，你可以像这样使用它：

变换:缩放(1.3)旋转(7度)；

票数 7

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15768315

复制

相似问题

问CSS3:如何同时旋转和缩放img？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3:如何同时旋转和缩放img？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3:如何同时旋转和缩放img？
EN