标签: css-transforms

在子级变换缩放期间未应用 CSS 父级边框半径

我正在研究砖石类型布局，其中有一个带有column-count属性的容器，然后是带有圆角的保存图像的项目。我希望图像transform: scale在悬停时有一点效果，但是通过这种 css 组合，圆形边框在过渡过程中消失。

有什么办法解决吗？

.container {
  column-count: 2;
}

.item {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
}

img {
  max-width: 100%;
  max-height: 100%;
  transition: all 0.2s;
}

img:hover {
  transform: scale(1.1);
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">

  <div class="item">
    <img src="https://images.unsplash.com/photo-1558834643-1dacaf774843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60">
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

html css css-transforms

Tom*_*myF

2019 05-26

5
推荐指数

1
解决办法

1874
查看次数

React 组件可放大图像，同时保持鼠标悬停时的尺寸 - React + Bootstrap

所以这几天我一直在到处寻找，但找不到任何有用的东西。我正在使用 React 和 Bootstrap。我想要一个无状态的功能组件，它采用图像路径并返回 img 元素，当鼠标悬停在该元素上时，会放大图像，同时保持元素的尺寸相同。

我努力了：

更改 onMouseOver 和 onMouseOut 事件中的 style 属性，如下所示

import React from "react";

const ImageHoverZoom = ({ imagePath }) => {
  return (
    <img
      src={imagePath}
      alt=""
      style={{ overflow: "hidden" }}
      onMouseOver={(e) => (e.currentTarget.style = { transform: "scale(1.25)", overflow: "hidden" })}
      onMouseOut={(e) => (e.currentTarget.style = { transform: "scale(1)", overflow: "hidden" })}
    />
  );
};

export default ImageHoverZoom;

Run Code Online (Sandbox Code Playgroud)

创建自定义 css 类并将其应用到 img 元素。

索引.css：

.hover-zoom {
  overflow: hidden;
}

.hover-zoom img {
  transition: all 0.3s ease 0s; …

Run Code Online (Sandbox Code Playgroud)

javascript css css-transforms reactjs bootstrap-4

Jur*_*rij

2020 07-31

5
推荐指数

1
解决办法

2万
查看次数

CSS 将文本旋转 n 度，但不旋转边界框？

我知道 CSStransform: rotate属性以及用于制作有角度元素的方法div，但有一个非常重要的设计元素我在任何地方都找不到解决方案：

如何保持边界框的角度

当我创建有角度的 div 元素时，我使用旋转n度的包装元素，然后使用span旋转-n度的子元素（通常是 a ）。不幸的是，这会导致子元素拥有独立于其父元素的自己的矩形边界。

下图是一个非常基本的示例，每个人似乎都可以接受，其中子元素的文本位于无角度的矩形内，但这不是我想要的：

.parent {
    width: 200px;
    height: 200px;
    transform: rotate(30deg);
    background-color: blue; /* for clarity in img */
}
.child {
    display: inline-block;
    transform: rotate(-30deg);
    background-color: rgba(250, 80, 80, 0.4); /* for clarity in img */
}

Run Code Online (Sandbox Code Playgroud)

值得注意的是，子元素必须具有display: inline-block才能实际旋转。

这大约是我正在寻找的内容：

                                  Some
                            text goes here
                       and automatically just-
                  ifies to the shape of the parent
              element which in this case hap-
         pens …

Run Code Online (Sandbox Code Playgroud)

html css css-transforms

Jos*_*ett

2020 08-12

5
推荐指数

1
解决办法

1102
查看次数

变换框：内容框、边框框和描边框“属性值无效”Chrome 开发工具

MDN Web 文档声明以下都是有效属性：

transform-box: content-box;
transform-box: border-box;
transform-box: fill-box;
transform-box: stroke-box;
transform-box: view-box;

Run Code Online (Sandbox Code Playgroud)

它还声明所有当前（2021 年 11 月）浏览器都完全支持，当然 IE11 除外。Caniuse.com 确认此浏览器支持transform-box.

但是，当我尝试使用transform-box: content-box;、transform-box: border-box;或时transform-box: stroke-box;，Chrome 开发工具会将这些报告为“无效属性值”：

我错过了什么吗？

css svg google-chrome-devtools css-transforms

Luk*_*uke

2021 11-04

5
推荐指数

0
解决办法

218
查看次数

使用具有变换原点中心的滚轮在鼠标点上放大/缩小图像。需要帮助计算

语境：

我的要求是通过用户对图像的操作进行图像转换，例如缩放、旋转和平移。
图像的旋转和平移是在其中心使用变换原点 50% 50%（默认）完成的。
为了使用鼠标滚轮缩放鼠标点上的图像，我能够使其与变换原点 0 0 一起使用
只是为了在更改原点时适应缩放行为，我需要重新计算相对于新原点的其他转换。

问题：

如果变换原点默认为 50% 50%，如何缩放鼠标点上的图像？
以下小提琴与变换原点 0 0 一起工作以供参考。我需要帮助使用变换原点 50% 50% 来优化此计算。

有人可以协助进一步优化此计算，以便它可以与默认变换原点一起使用吗？

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .container {
      background-color: lightgrey;
      }
      .stage {
      height: 100%;
      width: 100%;
      overflow: hidden;
      }
      #image {
      transform-origin: 0 0;
      height: auto;
      width: 80%;
      cursor: grab;
      }
      .actions {
      display: flex;
      position: absolute;
      bottom: 0;
      left: 0;
      height: 1.5rem;
      width: 100%;
      background-color: lightgrey;
      }
      .action {
      margin-right: 1rem;
      }
    </style>
  </head> …

Run Code Online (Sandbox Code Playgroud)

javascript css css-transforms

Pra*_*bhu

2022 04-29

5
推荐指数

1
解决办法

2416
查看次数

基本动画 HTML 和 CSS

所以我只是一个初学者，我只是想弄清楚动画及其工作原理。

我的计划是在一条直线上以无限度数（比方说 90 度）无限地移动球。以下是我想知道的几个问题：

有没有更好的方法来使用具有共同规则和略有不同规则（具有不同旋转）的类？
如何让球在具有不同旋转的新线上移动？

.line,
.line-deg90 {
  background-color: hsl(0, 0%, 0%);
  height: 3px;
  width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 0 0 -200px;
  transform-origin: 50%;
}

.line-deg90 {
  transform: rotate(90deg);
}

.ball {
  background-color: hsl(0, 0%, 0%);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  position: absolute;
  top: -15px;
  left: 0;
  animation: move 2s infinite alternate ease-in-out;
}

@keyframes move {
  0% {
    left: 0px;
    top: -15px;
  }

  100% {
    left: 370px;
    top: -15px;
  }

Run Code Online (Sandbox Code Playgroud)

<div class="line"> …

Run Code Online (Sandbox Code Playgroud)

html css css-transforms css-animations

Mus*_*afa

2022 01-19

5
推荐指数

1
解决办法

68
查看次数

CSS `transform` 正在影响 `background-attachment`

在父元素上使用 CSStransform会影响所有其他子元素及其background-attachment属性。

在我提供的示例中，我在子元素内伪造了丙烯酸模糊效果。

当我尝试模仿窗口生成的动画时，会出现此问题，其中窗口不透明度设置为 0，并且动画会将该窗口从缩放scale(0.8)到scale(1)，并对执行相同的操作opacity。

在此特定示例中，我没有提供窗口生成动画，但只需调用wm_window_scale(window_1, 1.2)JavaScript 内部即可轻松评估问题。

明显的问题是background-attachment现在完全被忽略，并且背景的模糊版本（丙烯酸模糊图像）现在占据父元素的宽度和高度，而不是视口（正如它应该的那样）。而显然这偏离了应用程序的“沉浸感”。我也许知道如何使用 JavaScript 修复它，但我想要一个无需 JavaScript 即可工作的解决方案，我想要纯 CSS。

var _dbglog=document.querySelector("#_dbglog .messages");function dbglog(_,e=5e3){var w=document.createElement("div");w.setAttribute("class","message"),w.innerHTML=_,_dbglog.appendChild(w),setTimeout(function(){w.style.width="100%",w.style.height="32px"},0),e>15e3&&(e=15e3),setTimeout(function(){w.remove()},e)}const WM_WINDOW_NULL=4,WM_WINDOW_NOT_ELEMENT=8,WM_WINDOW_NOT_A_WINDOW=22,WM_WINDOW_POSX_NULL=20,WM_WINDOW_POSY_NULL=24,WM_WINDOW_SIZW_NULL=36,WM_WINDOW_SIZH_NULL=40,WM_WINDOW_MOVE_SUCCESS=50,WM_WINDOW_SIZE_SUCCESS=72,WM_WINDOW_MAXIMIZE_SUCCESS=100,WM_WINDOW_CHECK_PASSED=128,WM_WINDOW_RADIUS_PASSED=150,WM_WINDOW_CENTER_PASSED=274,WM_WINDOW_SNAP_LEFT_PASSED=296,WM_WINDOW_SNAP_RIGHT_PASSED=324,WM_WINDOW_SNAP_CENTER_PASSED=352,WM_WINDOW_SCALE_PASSED=374,WM_WINDOW_SCALE_DEFAULTED=402,WM_DESKTOP_SIZE_ZERO=256,abs=_=>Math.abs(_),i2p=function(_){return _+"px"},s2i=function(_){return Number(_.replace(/[aA-zZ]/g,""))};function wm_window_check(_=null){return null==_?WM_WINDOW_NULL:_ instanceof HTMLElement?0==_.getElementsByClassName("titlebar").length?WM_WINDOW_NOT_A_WINDOW:WM_WINDOW_CHECK_PASSED:WM_WINDOW_NOT_ELEMENT}function wm_window_move(_=null,e=null,t=null){dbglog("<b>wm_window_move</b>("+wm_window_get_id(_)+", "+w+", "+h+")");let i=wm_window_check(_);return i!=WM_WINDOW_CHECK_PASSED?i:null==e?WM_WINDOW_POSX_NULL:null==t?WM_WINDOW_POSY_NULL:(_.style.left=i2p(e),_.style.top=i2p(t),WM_WINDOW_MOVE_SUCCESS)}function wm_window_size(_=null,e=null,w=null){dbglog("<b>wm_window_size</b>("+wm_window_get_id(_)+", "+e+", "+w+")");let t=wm_window_check(_);return t!=WM_WINDOW_CHECK_PASSED?t:null==e?WM_WINDOW_SIZW_NULL:null==w?WM_WINDOW_SIZH_NULL:(e=abs(e),w=abs(w),_.style.width=i2p(e),_.style.height=i2p(w),WM_WINDOW_SIZE_SUCCESS)}function wm_window_maximize(_=null){dbglog("<b>wm_window_maximize</b>("+wm_window_get_id(_)+")");let e=wm_window_check(_);if(e!=WM_WINDOW_CHECK_PASSED)return e;let w=wm_desktop_get_size();if(w==WM_DESKTOP_SIZE_ZERO)return w;var t=Number(_.getAttribute("wm-maximized"));if(_.setAttribute("wm-maximized",Number(!t)),"1"==_.getAttribute("wm-centered")&&_.setAttribute("wm-centered","0"),t){let e=_.getAttribute("wm-last-pos").split(","),w=_.getAttribute("wm-last-siz").split(",");wm_window_move(_,e[0],e[1]),wm_window_size(_,w[0],w[1]),wm_window_radius_enable(_)}else wm_window_move(_,0,0),wm_window_size(_,w[0],w[1]-40),wm_window_radius_disable(_);return WM_WINDOW_MAXIMIZE_SUCCESS}function wm_window_get_size(_=null){dbglog("<b>wm_window_get_size</b>("+wm_window_get_id(_)+")");let e=wm_window_check(_);return e!=WM_WINDOW_CHECK_PASSED?e:[s2i(_.style.width),s2i(_.style.height)]}function wm_window_get_position(_=null){dbglog("<b>wm_window_get_position</b>("+wm_window_get_id(_)+")");let e=wm_window_check(_);return e!=WM_WINDOW_CHECK_PASSED?e:[s2i(_.style.left),s2i(_.style.top)]}function wm_window_get_position_and_size(_=null){dbglog("<b>wm_window_get_position_and_size</b>("+wm_window_get_id(_)+")");let e=wm_window_check(_);if(e!=WM_WINDOW_CHECK_PASSED)return e;let w=wm_window_get_position(_),t=wm_window_get_size(_);return[w[0],w[1],t[0],t[1]]}function wm_desktop_get_size(){dbglog("<b>wm_desktop_get_size</b>()");let _=[desktop.clientWidth,desktop.clientHeight];return 0==_[0]||0==_[1]?WM_DESKTOP_SIZE_ZERO:_}function wm_window_make_movable(_=null){dbglog("<b>wm_window_make_movable</b>("+wm_window_get_id(_)+")");let e=wm_window_check(_);if(e!=WM_WINDOW_CHECK_PASSED)return e;dbglog("&gt; Not …

Run Code Online (Sandbox Code Playgroud)

html css background background-image css-transforms

作者

lucky-day

5
推荐指数

1
解决办法

952
查看次数

CSS 旋转的 div 边框显示奇怪的轮廓

我正在尝试旋转带有边框的 div。边框的颜色与背景的颜色相同。边框轮廓和背景之间出现一条非常细的线。下面是我的代码。我正在努力摆脱那条奇怪的线。

body {
  background-color: black;
}

div {
  width: 50px;
  height: 50px;
  background-color: white;
  border: 50px solid black;
  transform: rotate(45deg);
}

Run Code Online (Sandbox Code Playgroud)