CSS变换旋转变形-6ren

CSS变换旋转变形

转载作者：太空宇宙更新时间：2023-11-03 17:52:58

25

4

下面是我的代码

http://liveweave.com/ks0njD

html:

<div class="container">
<div class="box1"></div>
<div class="box2"></div>
  </div>

和 CSS:

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  backface-visibility: hidden;
    perspective: 1000px;
}
.box1 {
  position: relative;
  width: 100px;
  height: 2px;
  background: black;
  top: 100px;
  left: 200px;
  transform: rotate(45deg);
  transition: .5s;
  backface-visibility: hidden;
    perspective: 1000px;
}
.box2{
  position: relative;
  width: 100px;
  height: 2px;
  background: black;
  top: 100px;
  left: 200px;
  transform: translateY(68px) rotate(-45deg);
  backface-visibility: hidden;

  transition: .5s ease;
    perspective: 1000px;

}
.container:hover .box1{
  transform: rotate(60deg);
  transition: .8s ease;
  backface-visibility: hidden;
}
.container:hover .box2 {
  transform: translateY(84px) rotate(-60deg);
  transition: .8s ease;
  backface-visibility: hiddeni;
}

如您所见，当 div 旋转时会出现轻微变形，无论如何我可以使它看起来完美吗？我尝试使用背面和透视，但没有任何区别。

最佳答案

@Amer 你所说的“看起来很完美”是什么意思？是这样的吗？

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  backface-visibility: hidden;
    perspective: 1000px;
}
.box1 {
  position: relative;
  width: 100px;
  height: 15px;
  background: black;
  top: 112px;
  left: 200px;
  background:#3ac7f2;
  transform: rotate(45deg);
  transition: .5s;
  backface-visibility: hidden;
   perspective: 1000px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.box2{
  position: relative;
  width: 100px;
  height: 15px;
  background: black;
  top: 93px;
  left: 200px;
  background:#3ac7f2;
  transform: translateY(68px) rotate(-45deg);
  backface-visibility: hidden;
  transition: .5s ease;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.container:hover .box1{
  background:#09F;
  transform:background .4s ease-in-out;
  transform: rotate(-45deg);
  transition: .8s ease;
  backface-visibility: hidden;
}
.container:hover .box2 {
  background:#09F;
  transform:background .4s ease-in-out;
  transform: translateY(68px) rotate(45deg);
  transition: .8s ease;
  backface-visibility: hiddeni;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
  </div>
</body>
</html>

关于CSS变换旋转变形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26901966/

25

4

0

文章推荐： python - python 中的深度复制和过滤

文章推荐： ruby-on-rails - 如何显示学校名称= x 的所有部门？

文章推荐： c# - C#中套接字的列表或ArrayList

文章推荐： ruby - 如何将十六进制转换为 base64urlsafe？

html - SVG 变形
我正在尝试在我的网站上嵌入多个 .svg 文件。只要我使用 Chrome、Firefox 或我目前测试过的任何移动浏览器，一切似乎都运行良好。但是，有一个异常(exception):每当我在 Wind
html - SVG 变形
我正在尝试在我的网站上嵌入多个 .svg 文件。只要我使用 Chrome、Firefox 或我目前测试过的任何移动浏览器，一切似乎都运行良好。但是，有一个异常(exception):每当我在 Wind
Java2D - 变形/插入两个形状
是否有某种方法(库或算法)可用于在 java.awt.Shape 或其路径迭代器的两个实例之间进行插值？例如，要在矩形和椭圆之间无缝过渡？或者更一般的 Path2D 情况。最佳答案 SwingX 中
javascript - HTML5 Canvas 变形
我试图在动态大小的视频上包含一个 Canvas 元素，该视频将异步加载。在 Canvas 上，用户将能够拖动矩形选择框并调整其大小。在我的 JS 文件中，我有一个监听器监 window 口，并通过
opengl - 我应该如何处理(变形)opengl中的4D对象？
Closed. This question needs to be more focused。它当前不接受答案。想改善这个问题吗？更新问题，使其仅关注editing this post一个问题。去
python - 使用移位向量进行 GDAL 变形
有没有办法通过 GDAL(使用 Python API)使用移位向量来扭曲图像？通过移位向量，我的意思是例如。包含以下列的 CSV(或 numpy)文件:starting_x,starting_y,t
ios - 使用 CoreAnimation 变形
我正在创建一个导航按钮。当用户按下它时，按钮的图像应该改变，反射(reflect)它的状态(例如菜单打开/关闭)。我决定为此做一个 morphing-liek 动画。可以用CoreAnimation来
python - 如何根据另一列的每组最大值将一列的标签分配给新的标签？ Pandas 变形
我在 Pandas 中有以下示例数据框。如何获取每个 'Id' 的 'label_weight' 值的最大值并将相应的 'label' 列分配给该 'Id' 在新列 'assgined_label'
html - 文本使我的 div 变形
文本使我的框变形。这是我的: This text is deforming the "leftOne" 还有 CSS: .leftOne { float: left;
html - CSS水平菜单使用无序列表 flex 变形
HTML: Home Services About Us Contact Us CSS: ul { pa
image - 变形 2 面图像
我想在这里得到 openCV 爱好者的帮助。我想知道关于如何变形 2 个面孔的方向(以及一些建议或代码段)，以及一种比率，即第一个面孔的 10% 和第二个面孔的 90%。我见过像 cvWarpAf
python - 脸部变形/变形 - 周围没有框架？
我已经搜索了很长时间，但还没有找到真正的答案，但是，也许我的眼睛上有西红柿，但是真的没有针对 python/MATLAB 的框架可以进行面部扭曲/开箱即用？一个框架，我在其中放入两张带有特征点的图像
android - Material FAB 变形
根据material.io float 操作按钮可以变身为操作菜单，如 this .有什么方法可以只使用 Material 库(没有第三方库)吗？我试过了this库，但它会在菜单关闭后根据底部应用栏
cocoa - -setWantsLayer 导致 NSOpenGLView 变形
这就是我想用我的 NSOpenGLView 做的事情。目前 NSOpenGLView 覆盖了窗口的整个区域，我想在 NSOpenGLView 顶部添加按钮、nsviews 和图像。我浏览了网页，发现
ember.js - 如何避免使用 Ember 变形？
我正在遍历在 Controller 中定义的集合。我正在使用基础轨道插件将其转变为轮播。但是我的HTML被弄乱了，并且破坏了插件，因为它期望获得一定的输出。
java - 如何使用 BufferedImage 变形/修改图像
我不知道如何使用 BufferedImage 使图像变形。有人能帮我吗？我绝对绝望了。感谢您的所有提示。对不起我的英语不好。 | |
ios - 我如何最好地存储图像以用作核心数据存储中的 UIImage？变形？二进制数据？
这个问题的答案似乎相互矛盾，我很困惑在 Core Data 数据库中存储图像的最佳方式是什么。 This question说可变形，但是this question说要使用二进制数据。如果我只是想把它
java - 如何解决这个问题，变形 HTML 表单
您好，我不确定如何处理有关表单的逻辑。所以，表格很大，我知道有 20 多个字段被认为是“不好的做法”，表格应该最少，但这就是客户想要的，所以不用争论，无论如何表格都会接受订单，但有不同的顺序类型(更具
macos - NSWindow 调整大小后 NSView 变形
我正在使用 animator() 在我的应用程序的帧( subview )之间横向滚动 NSScrollView。当动画发生并且我调整 NSWindow 的大小时，整个 NSView 会像这样扭曲:
swift - 变形 Sprite 直到纹理不再连续 - 如何保持接触检测？
仍在我的太空入侵者克隆上工作，我想在屏幕底部添加可破坏的基地: 我已经弄清楚如何通过让炸弹和盾牌相互接触来修改盾牌的外观，然后在 didBegincontact 中，从炸弹爆炸的 mask 和盾牌的当

首页

博学

6Ren·AI

商城

CSS变换旋转变形