css - 根据“背景位置:中心”计算背景位置?
问题描述
如果我从 5 个不同的部分构建图像(用于创建效果),一种简单的方法是创建 5 个具有相同样式的不同类(我正在使用 react)。我想要达到的效果是在悬停时旋转图像的 5 个部分。这是jsx:
var sectionStyle = {
width: '100%',
height: '100%',
backfaceVisibility: 'hidden',
backgroundImage: 'url(' + background + ')',
backgroundSize: 'cover',
};
return(
<div className="container1">
<div className="thumb-details"></div>
<div className="part p01">
<figure className="f1" style={sectionStyle}/>
<div className="f2"></div>
</div>
<div className="part p02">
<figure className="f1" style={sectionStyle}/>
<div className="f2"></div>
</div>
<div className="part p03">
<figure className="f1" style={sectionStyle}/>
<div className="f2"></div>
</div>
<div className="part p04">
<figure className="f1" style={sectionStyle}/>
<div className="f2"></div>
</div>
<div className="part p05">
<figure className="f1" style={sectionStyle}/>
<div className="f2"></div>
</div>
</div>
然后我可以手动计算每个图形类的背景位置,以便每个图形图像将从上一个结束的位置开始:
.thumbnail {
width: 100%;
height: 20vw;
}
.container1 {
width: 20vw;
height: 20vw;
position: absolute;
/* background-color: blue; */
}
.thumb-details {
max-width: 100%;
height: 20vw;
background-color: yellow;
position: absolute;
left:0;
right:0;
transition: opacity .2s ease-out;
}
.part {
width: 20%;
height: 100%;
position: absolute;
transform: rotateY(0deg);
transform-style:preserve-3d;
transition: all .5s ease-out;
}
.f1 {
transform: rotateY(0deg);
}
.p01 {
left: 0;
}
.p01 figure {
background-position: 0px 0px;
}
.p02 {
left: 20%;
}
.p02 figure {
background-position: -4vw 0px;
}
.p03 {
left: 40%;
}
.p03 figure {
background-position: -8vw 0px;
}
.p04 {
left: 60%;
}
.p04 figure {
background-position: -12vw 0px;
}
.p05 {
left: 80%;
}
.p05 figure {
background-position: -16vw 0px;
}
.container1:hover .part {
transform: rotateY(180deg);
}
它只是 20vw 除以 5,然后我将每个的背景位置(从第二个开始)设置为前一个结束的位置。
这工作正常。问题是 - 图像未居中,我无法设置其总宽度和高度,因为如果我按照我的意愿使用“背景位置:中心”,那么我将无法再跟踪图像的每个部分。
我希望它听起来并不复杂。我理论上需要的是计算图像的不同偏移量(我在 CSS 中显示的 5 个不同的偏移量),但是在图像定位到居中后从图像计算它。这很重要,因为我希望图像具有响应性。
可能吗?
提前致谢
解决方案
推荐阅读
- r - 如何使用 dplyr 在 R 中按月对数据进行分组
- header - 504 错误 AWS 服务器网关超时后使用 mod_wsgi 为 redhat 中的 django 应用程序配置 apache(httpd)
- r - 创建具有共享 ID 的新列以随机链接 R 中的两行
- reactjs - 由于 React.StrictMode 导致问题,React 组件被调用两次
- amazon-web-services - 由 DynamoDB 标准属性名称和值格式中的多个值组成的分区键?
- python - 如何计算与每个点关联的边的长度?
- c# - 在 Animator 中使用 Unity 事件切换网格渲染器
- flutter - 例外:-尽管删除了扩展的小部件,但没有布置 RenderBox
- ios - 如何将 GoogleSignIn 身份验证连接到用户个人资料?
- terminal - 在特定频道中启动 Discord 应用程序 (Linux)