- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
在 Chrome 上运行良好,但当我在 FireFox 上尝试时它无法运行。
我已经在互联网上搜索过,但没有找到对我有帮助的东西。
我对转换、动画、过渡等知之甚少,所以我尝试了一些修改并移动了“透视”,但仍然一无所获。
这是 CSS
.uic-wrapper {
height: 340px;
width: 300px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 500px;
perspective-origin: 50% -30%;
}
.uic-wrapper:hover .card-middle {
transform: translate3d(0, 0, -60px);
opacity: .8;
}
.uic-wrapper:hover .card-back {
transform: translate3d(0, 0, -120px);
opacity: .4;
}
他就是一个很好的例子
$(document).ready(function(){
"use strict";
var container = $(".uic-wrapper");
var nextBtn = $("nav .btn-next");
var backBtn = $("nav .btn-back");
var finishBtn = $("nav .btn-finish");
updateNav();
function updateNav(){
var hasAnyRemovedCard = $(".toRight").length ? true : false,
isCardLast = $(".card-middle").length ? false : true;
if(hasAnyRemovedCard) {
backBtn.removeClass('back-btn-hide');
} else {
backBtn.addClass('back-btn-hide');
$(".card-front").addClass('noBack');
}
if(isCardLast){
nextBtn.hide();
finishBtn.removeClass("hide");
} else {
nextBtn.show();
finishBtn.addClass("hide");
}
}
function showNextCard(){
//Check if there is only one card left
if($(".card-middle").length > 0){
var currentCard = $(".card-front"),
middleCard = $(".card-middle"),
backCard = $(".card-back"),
outCard = $(".card-out").eq(0);
//Remove the front card
currentCard.removeClass('card-front').addClass('toRight');
//change the card places
middleCard.removeClass('card-middle').addClass('card-front');
backCard.removeClass('card-back').addClass('card-middle');
outCard.removeClass('card-out').addClass('card-back');
updateNav();
}
}
function showPreviousCard(){
var currentCard = $(".card-front"),
middleCard = $(".card-middle"),
backCard = $(".card-back"),
lastRemovedCard = $(".toRight").slice(-1);
lastRemovedCard.removeClass('toRight').addClass('card-front');
currentCard.removeClass('card-front').addClass('card-middle');
middleCard.removeClass('card-middle').addClass('card-back');
backCard.removeClass('card-back').addClass('card-out');
updateNav();
}
nextBtn.on('click', function(){
showNextCard();
});
backBtn.on('click', function(){
showPreviousCard();
});
});
* {
box-sizing: border-box;
outline: none;
}
a {
color: #1590d0;
}
html, body {
background: #10a3f1;
/* fallback for old browsers */
height: 100%;
font-family: 'Roboto', sans-serif;
}
a {
text-decoration: none;
}
h1 {
color: #6b7d88;
}
.form-group {
margin-top: 15px;
}
.form-group label {
color: rgba(0, 0, 0, 0.8);
}
input[type="text"],
input[type="password"] {
width: 100%;
display: block;
padding: 10px;
border-radius: 8px;
border: none;
background-color: #e5eeed;
margin-top: 5px;
}
.hide {
display: none;
}
.uic-wrapper {
height: 340px;
width: 300px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 500px;
perspective-origin: 50% -30%;
}
.uic-wrapper ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.uic-wrapper ul li {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s;
}
.uic-wrapper ul li .cards-wrapper .card-front {
position: relative;
z-index: 3;
box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.19);
}
.uic-wrapper ul li .cards-wrapper .card-middle {
z-index: 2;
}
.uic-wrapper ul li .cards-wrapper .card-back {
z-index: 1;
}
.uic-wrapper ul li .cards-wrapper .card-out {
z-index: 0;
opacity: 0;
}
.uic-wrapper nav {
position: relative;
z-index: 4;
}
.uic-wrapper nav a {
color: #ffb902;
}
.uic-wrapper nav .btn-back {
font-size: 28px;
position: fixed;
top: 20px;
left: 20px;
transition: all 0.3s ease;
}
.uic-wrapper nav .btn-back:active {
transform: scale(0.96);
}
.uic-wrapper nav .btn-back.back-btn-hide {
margin-top: -30px;
opacity: 0;
}
.uic-wrapper nav .btn-finish,
.uic-wrapper nav .btn-next {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
padding: 10px;
background-color: #66bf65;
color: white;
text-align: center;
border-radius: 0;
border-radius: 8px;
transition: all 0.3s ease;
}
.uic-wrapper nav .btn-finish:active,
.uic-wrapper nav .btn-next:active {
transform: scale(0.96);
}
.uic-wrapper .card {
background-color: #fff;
border-radius: 0;
height: 100%;
width: 100%;
padding: 80px 20px 20px 20px;
transition: all 0.6s cubic-bezier(0.51, 0.02, 0.01, 0.88);
border-radius: 8px;
}
.uic-wrapper .noBack {
padding: 20px;
}
.uic-wrapper .toRight {
transform: translate3d(0, 0, 100px);
opacity: 0;
}
.uic-wrapper .toLeft {
transform: none;
opacity: 1;
}
.uic-wrapper:hover .card-middle {
transform: translate3d(0, 0, -60px);
opacity: .8;
}
.uic-wrapper:hover .card-back {
transform: translate3d(0, 0, -120px);
opacity: .4;
}
.metaInfo {
position: fixed;
bottom: 20px;
left: 20px;
color: rgba(255, 255, 255, 0.8);
}
.metaInfo a {
color: #fff;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<div class="uic-wrapper no-touch">
<ul>
<li>
<ul class="cards-wrapper">
<li class="card card-front active">
<h1>Signup</h1>
<div class="form-group">
<label for="">First Name</label>
<input type="text" placeholder="First Name">
</div>
<div class="form-group">
<label for="">Last Name</label>
<input type="text" placeholder="Last Name">
</div>
</li>
<li class="card card-middle">
<div class="form-group">
<label for="">Email</label>
<input type="text" placeholder="Email">
</div>
<div class="form-group">
<label for="">Age</label>
<input type="text" placeholder="Age">
</div>
</li>
<li class="card card-back">
<div class="form-group">
<label for="">Pick a username</label>
<input type="text" placeholder="Username">
</div>
<div class="form-group">
<label for="">Password</label>
<input type="password" placeholder="Password">
</div>
</li>
<li class="card card-out">
<center>
<i style="font-size:62px;color: #66bf65;" class="fa fa-check"></i>
<br>
<h1>All Set!</h1>
</center>
</li>
</ul>
<nav>
<ul>
<li><a class="btn-back" href="#0"><i class="fa fa-arrow-left"></i></a></li>
<li><a class="btn-next" href="#0">Next <i class="fa fa-arrow-right"></i></a></li>
<li><a href="#0" class="btn-finish hide">Finish</a></li>
</ul>
</nav>
</li>
</ul>
</div>
还有一个 JSFiddle以防万一。
最佳答案
如果似乎没有任何效果,您可以尝试以下 firefox 的解决方法:
@-moz-document url-prefix() {
.uic-wrapper:hover .card-middle {
transform: translate3d(14px, -12px, -30px);
opacity: .8;
width: 90%;
}
.uic-wrapper:hover .card-back {
transform: translate3d(28px, -24px, -120px);
opacity: .4;
width: 80%;
}
}
我们正在手动设置转换的 X 和 Y 坐标,并设置一些宽度以匹配它的实际外观。
这是一个工作 fiddle https://jsfiddle.net/85a1gxbL/15/
关于css - 透视不适用于 FireFox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51256265/
我正在尝试使用透视投影描绘一个立方体,但我得到的只是一个正方形的角。正方形的面设置在原点并向正方向扩展。使用 glOrtho 我可以设置坐标系,但我在使用 glPerspective 做同样的事情时遇
SELECT j.departure, stopDepartures.* FROM journey j JOIN journey_day ON journey_day.journey = j.id J
我确实需要一些帮助来了解如何根据相似的值对表格进行透视。 day | startDate ----------------------- Monday | 09:00 Monday |
我有以下数据框 df = pd.DataFrame({ '1': ['Mon (07/08)','Sales', '2'], '2': ['Mon (07/0
dummy_df = pd.DataFrame({ 'accnt' : [101, 102, 103, 104, 101, 102, 103, 104, 101, 102, 103, 104,
public class MainActivity extends Activity { LinearLayout rotator; protected void onCreate(Bundle sa
我正在尝试通过 PHP 更改 ImageMagick 中 Plane2Cylinder 失真的视角。 为了帮助解释我在寻找什么,我制作了这张图: 您可以看到红色 block 的下部比顶部的半径更大,就
我有一个像这样的简单查询.. USE AdventureWorks; GO SELECT DaysToManufacture, AVG(StandardCost) AS AverageCost FRO
我希望我可以更改架构,但我受制于它,假设我有以下表格 JanDataTable FebDataTable MarDataTable ProductsTable 其中前三个表有 ID 和 Amount
我正在将我们的一个旧应用程序从 vb6 更新到 c#,在此过程中必须重新创建原始程序员设计的自定义控件。该控件简单地获取对象的尺寸,矩形或圆锥形,并在 3D 中放置对象的轮廓草图(我认为在技术上是 2
我一直在尝试在 MySQL 中对表进行透视(将行移动到列)。我知道 mysql 没有枢纽功能,所以我认为需要联合,但不是 100% 确定。我有三列,user_id、option_id 和 Questi
我正在尝试旋转像这样创建的 mysql 表 'CREATE TABLE `fundreturns` ( `Timestamp` datetime NOT NULL, `FundName` varcha
提前感谢任何对此提供帮助的人。我知道我以前做过这件事,没有太多痛苦,但似乎找不到解决方案 我的数据库看起来像这样: `tbl_user: ---------- id ( pkey )
我正在尝试开发 X 轴方向的卡片翻转动画。截至目前,div 现在只需使用 rotateX() 方法进行旋转。我试过对上层 div 使用透视属性,而不是工作它扭曲了我的 div 结构。因为,这只是一个工
我有一个带有 CSS3 透视图的 DIV 元素。 DIV 包含 2 个子 DIV,其中之一在 z 轴上有平移。这应该会导致一个 DIV 在另一个前面,因此后面的那个应该被挡住。 然而,这些 DIV 的
大家好,我有一张这样的 map http://sinanisler.com/demo/map/ 如您所见,有一些树,但不是真正的视角,我想要这个 http://sinanisler.com/demo/
我有以下代码将快照拍摄到帧缓冲区。我验证了帧缓冲区工作正常并且相机正确地面向对象。我曾经正确地完成图片,但它是基于错误的代码,使用了错误的截锥体。所以我决定重新开始(使用截锥体)。 物体以中间为中心,
我正在尝试将求和列添加到透视数据框,但不断收到数据解析错误。 mydata = [{'amount': 3200, 'close_date':'2013-03-31', 'customer': 'Cu
我正在尝试将一些 groupby/crosstabbing 逻辑应用于用户定义对象的 IEnumerable 列表,并且想知道是否有人可以帮助我。我坚持使用现有的(相当烦人的)对象模型来工作,但无论如
我想使用一个 CALayer 创建如下图所示的效果 - 而不是通过拆分图像、对两半进行透视变换然后将它们并排放置。 可以使用 CoreImage 以任何方式完成吗? 或者,有人可以使用 OpenGL
我是一名优秀的程序员,十分优秀!