Question

所以在我开枪之前，我需要帮助解决css / html问题。我是一名.NET程序员，并且不需要深入研究html或css。我有一些图表存储为图像，而不是水平显示他们希望它们垂直。因此，例如，图像将是75px高和900px宽。它们显示在穿过屏幕的Div中。因此，要垂直显示它们，我会对图像进行一些转换 - 旋转（-90）。没问题。问题出现在原点部分。我希望Div中的图像垂直排列在div容器的左侧，这个容器是另一个Div。但是我必须用边缘来使容器移动到屏幕的右侧。当然，当屏幕尺寸发生变化时，无论如何都无法正常工作。一定是我缺少的东西？这是我正在使用的代码：

CSS

   .columnMain
{   
    float: left;  
    **margin-left: 440px;**  
    **margin-top:-425px;**  
    -webkit-transform: rotate(-90deg); /* Safari and Chrome */  
    -o-transform: rotate(90deg); /* Opera */  
    -webkit-transform-origin: 50% 50%;  
    position:relative;  
}
div.container  
{  
    width: 99%;  
    margin-left: 2px;  
    padding: 0px;  
    height:600px;  
    background-color:#000000;  
    border:1px solid white;  
    top:225px;  
    position:absolute;  
}

我上面的问题区域是粗体。以及下面的HTML / ASP.NET

 <div class="container">
        <div class="columnMain">
            <asp:ContentPlaceHolder ID="CMGraph" runat="server">
                <uc3:MGraph ID="MGraph1" runat="server" ClientIDMode="Inherit" 
                    EnableViewState="True" ViewStateMode="Enabled" />**This is the image/chart that has been created elsewhere**
            </asp:ContentPlaceHolder>
        </div>
 </div>

修改原点并不重要，因为我需要使用负数将Div及其内容带回div.container的左侧。所以我需要知道我是否可以做一些比我现在所做的更有说服力的事情，无论屏幕大小如何，它都能正常工作？

CSS变换动态旋转原点

0 个答案: