草庐IT

html - 用于文本旋转的 CSS3 转换

coder 2023-08-11 原文

我有一个关于 CSS3 变换属性(用于文本旋转)的问题 基于我对以下内容的使用；

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);

盒子模型似乎有些变化，即顶部/右侧/底部/左侧的计算方式有所不同。宽度/高度和 float 似乎也受到影响。

以下面这张图片为例；

你能简单的解释一下吗

  1. 旋转文本的确切影响是什么(比如旋转 90 度 如上所示)在顶部/右侧/底部/左侧填充/边距等
  2. 假设我们有 2 个 float 元素。一个上面有旋转的 文本和其他 div 以及一些其他内容，如下所示；

我想了解如何使第二个 div(右面板)恰好在第一个 div(旋转文本)之后开始？

<div class="fl text-transform-class">My Classes</div>
<div class="fl">Right Panel</div>

谢谢。

最佳答案

如果我没记错的话，元素是正常流的一部分，或者是 float 的，就好像它们没有被转换一样。一旦确定了他们的位置，就会执行转换或过渡。转换或过渡不会再对文档流或任何 float 产生任何影响。

什么边是顶部、左侧、右侧或底部会受到转换的影响。因此，如果您在示例中将边框应用到旋转后的 div 的顶部，边框将显示在左侧。

编辑:

为了希望能帮助您更好地理解它，我创建了一个与您的示例类似的示例，但我添加了填充、边距以及顶部和底部边框，希望能说明什么是什么。我还添加了背景颜色和边框 清楚地看到 block 元素的大小以及它们是如何旋转的。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body {
                margin: 0;
            }
            .fl {
                border-top: solid 2px #ff0000;
                border-bottom: solid 2px #00ff00;
                float: left;
                color: #ffffff;
                padding: 10px 30px;
            }
            .left {
                -webkit-transform: rotate(-90deg);
                -moz-transform: rotate(-90deg);
                -ms-transform: rotate(-90deg);
                -o-transform: rotate(-90deg);
                transform: rotate(-90deg);
                -webkit-transform-origin: 100% 0;
                -moz-transform-origin: 100% 0;
                -ms-transform-origin: 100% 0;
                -o-transform-origin: 100% 0;
                transform-origin: 100% 0;
                background-color: #808080;
                height: 50px;
                width: 300px;
                margin-left: -360px;
            }
            .right {
                background: #404040;
                height: 300px;
                width: 300px;
                margin-top: 18px;
                margin-left:74px;
            }
            span {
                display: block;
                width: 100%;
                height: 100%;
                background-color: #A0A0A0;
            }
        </style>
    </head>
    <body>
        <div class="fl left"><span>Rotated text</span></div>
        <div class="fl right"><span>Other content</span></div>
    </body>
</html>

重要的是要记住，在应用转换之前一切都已布置好。

我认为这个示例最有趣的部分是如何应用边距以使两个 div 彼此对齐并将它们都对齐到页面的左侧。如果不应用边距和转换，左侧 div 将 float 到页面左侧，右侧 div 将 float 到页面左侧。

如果我们随后只添加转换(还没有边距)，div 将旋转 -90 度(以右上角为原点)并最终位于右侧 div 的顶部。同时，它也会在左侧div原来所在的位置留下一个白色的大缺口。请记住，转换不会影响 float 。

为了让两个元素在视觉上再次与页面左侧对齐，我们必须应用边距。为了让左侧的 div 位于左侧，我们必须在左侧应用负边距。这可能会令人困惑，但请记住，边距是在转换之前应用的。因此，为了让 div 在转换后出现在我们想要的位置，我们首先必须在转换前将它移动 -360 像素(= 300 宽度 + 30 左填充 + 30 右填充)到左侧，以便它出现在 -90 度旋转后正好为 0 像素处。

右侧的 div 相对于左侧的 div float 。所以它有效地定位在 x 位置 360。因为我们将左侧 div 向左移动，负边距为 -360 像素，它现在将在像素 0 处结束。所以它在转换后与左侧 div 位于相同的位置.为了在视觉上将其与左侧 div 的右侧对齐，我们必须为其应用正边距。多少钱？另一个可能令人困惑的部分是我们在这里必须根据旋转的左 div 来计算它，因为我们必须在视觉上将它与旋转的左 div 对齐。所以它是 50(高度 = 旋转 div 的宽度)+ 10(顶部填充)+ 10(底部填充)+ 2 x 2(2 x 顶部/底部边框)= 74 像素。

我在右侧 div 的顶部添加了另一个 18 像素的边距，以在视觉上对齐 span 的内容区域。希望这一切有助于理解所有填充、边距、位置和 float 始终是在转换前计算的。

关于html - 用于文本旋转的 CSS3 转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7860413/

htmlCSS3divtransformfloatcss

有关html - 用于文本旋转的 CSS3 转换的更多相关文章

  1. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  4. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]

  5. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  6. ruby - 将散列转换为嵌套散列 - 2

    这道题是thisquestion的逆题.给定一个散列，每个键都有一个数组，例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案 这是一个迭代的解决方案，递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[

  7. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  8. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  9. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  10. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

随机推荐