图像旋转设计由css和js [英] image rotation design by css and js

问题描述

我想通过css和javascript旋转图片。我在css中没有太多的知识。我已经尝试了 transform 。
my css：

  .rotate-90 {
 -webkit-transform：rotate（90deg）; 
 -moz-transform：rotate（90deg）; 
 -ms-transform：rotate（90deg）; 
 -o-transform：rotate（90deg）; 
 transform：rotate（90deg）; 
} 
  

这是

这里是 fiddle 。

我想输出像这样附件

$ b

编辑：

为了更清楚地了解图像旋转工作正常。我在css有问题。当我添加css类它是重叠顶部按钮。我需要旋转和调整图像的方式，图像从不重叠我的按钮和我的页脚。

任何人都可以建议我如何调整图片，旋转后会调整其位置，不会重叠顶部按钮或页脚设计？

任何建议将不胜感激。

解决方案

我回答，因为有人可以从这个答案获得帮助。

经过一些研究和帮助，我找到了这个问题的解决方案。

解决方案：
$ b

我需要转换原点的 translateY（-100％），需要设置最小高度和宽度到图像容器div。

  .rotate-90 {
 -webkit-transform：rotate（90deg）; 
 -moz-transform：rotate（90deg）; 
 -ms-transform：rotate（90deg）; 
 -o-transform：rotate（90deg）; 
 transform：rotate（90deg）translateY（-100％）; 
 transform-origin：top left; 
} 
  

加载图片后，我将js设置为最小高度和宽度：

  $（＃single_image .cropBox img）load（function（）{
 $（＃single_image）。 css（minWidth，this.getBoundingClientRect（）。width）
 $（＃single_image）。css（minHeight，this.getBoundingClientRect（）。height）
}）; 
  

这里是 fiddle

I wanted to rotate an image by css and javascript. I do not have much knowledge in css. I have tried by transform. my css :

.rotate-90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

Here is the fiddle before applying rotating css.

And here is the fiddle after applying css.

I want output like this attachment

EDIT:

For more clear insight Image rotation is working fine. I am having problem in css. When i am adding css class it is overlaping top buttons. I need to rotate and adjust image in a way that image never overlap my buttons and my page footer.

Can anyone suggest me how can I adjust image that after rotating it will adjust his position and will not overlap top buttons or footer design?

Any suggestion will be appreciated.

解决方案

I am answering it because someone can get help from this answer.

After some research and help from SO great users I have found solution of this issue.

Solution:

I needed to translateY(-100%) with transform origin and needed to set min height and width to image container div.

.rotate-90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
}

After loading image I have set min height and width by js:

$("#single_image .cropBox img").load(function() {
     $("#single_image").css("minWidth", this.getBoundingClientRect().width)
     $("#single_image").css("minHeight", this.getBoundingClientRect().height)
   });

Here is the fiddle

这篇关于图像旋转设计由css和js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！