html - 如何将 div 转换为倾斜的透视图?
问题描述
我正在尝试像绿色盒子一样转换我的 div。
我想获得 3D 变换,而不是蒙版:
我找到了使用此生成器的方法,但 css 代码在我的小提琴上不起作用:
/*transform css3*/
#screen {
transform: scale(1.0) scaleZ(1.0) rotateX(-16deg);
transform-origin: 0% 0%;
perspective: 450;
perspective-origin: 100% 50%;
}
body {
height:100%;
padding:0;
margin:0;
}
#mask {
background:url(https://i.stack.imgur.com/cBK0O.png) no-repeat;
background-size:350px;
height:200px;
position:relative;
}
#screen:hover {
background:url(https://www.actugaming.net/wp-content/uploads/2018/06/Assassins-Creed-Odyssey_Leak_06-10-18_015-1.jpg);
background-size:100%;
}
#screen {
position:absolute;
bottom:38px;
background:red;
opacity:0.6;
}
#screen {
left:70px;
width:240px;
height:calc(240px * 9 / 16); /*keep 16/9 !*/
}
/*transform css3*/
#screen {
transform: scale(1.0) scaleZ(1.0) rotateX(-16deg);
transform-origin: 0% 0%;
perspective: 450;
perspective-origin: 100% 50%;
}
<div id="mask">
<div id="screen"></div>
</div>
解决方案
如果你想要那个形状,你可以使用clip-path
而不是使用transform
. 这使您可以对获得的形状进行大量控制。这是一个可以帮助您的好工具:https ://bennettfeely.com/clippy/
使用transform
,您可以倾斜图像以在背景/div 内容上实现 3d 效果。
#screen:hover {
background: url(https://www.actugaming.net/wp-content/uploads/2018/06/Assassins-Creed-Odyssey_Leak_06-10-18_015-1.jpg);
background-size: 100%;
}
#screen {
position: absolute;
background: red;
opacity: 0.6;
left: 70px;
width: 240px;
height: calc(240px * 9 / 16);
/*keep 16/9 !*/
transform-origin: bottom right;
-ms-transform: skew(20deg, 0deg);
-webkit-transform: skew(20deg, 0deg);
transform: skew(20deg, 0deg);
}
<div id="screen"></div>
推荐阅读
- kotlin - Kotlin 是否像 Python 一样有关键字“None”?
- ios - 推送导航控制器时出现异常 - iOS
- kotlin - Kotlin 中的 `?.apply`、`?.run` 和 `?.let` 之间的空值检查质量有什么区别吗?
- amazon-web-services - 使用带 boto3 的 ExternalQuestion 在 Amazon Mechnical Turk 上创建命中
- javascript - 节点js ajax上缺少谷歌翻译键
- jquery - IF 语句循环(重复)多次
- vaticle-typedb - 有没有办法“获取”所有连接的实体及其连接到实体特定实例的属性?
- plsql - 动态检查值是否在 sql 查询中
- excel - 如何使 Excel VBA 使用 for 循环调整每 n 行的高度?
- python - 使用 Tensorflow 对象检测 API 训练一定数量的步骤后,更改配置文件中的训练参数