在不同的变换中翻转磁贴
Flip of the tile in different transforms
嗨,我创建了具有翻转和缩放效果的瓷砖。
我正在尝试为每个磁贴添加不同的转换。我正在尝试仅使用 css 来实现这一点。我需要一些帮助。
这是我尝试过的代码。
.HTML:
<div class="wrap" data-sap-ui-preserve="html1" id="html1">
<div class="box">
<div class="boxInner">
<div class="face front">
<img src="images/s.png">
</div>
<div class="face back">
<label class="text">Search Donors...</label>
</div>
</div>
</div>
<div class="box">
<div class="boxInner clicked">
<div class="face front">
<img src="images/r.png">
</div>
<div class="face back">
<label class="text">Register</label>
</div>
</div>
</div>
<div class="box">
<div class="boxInner clicked">
<div class="face front">
<img src="images/u.png">
</div>
<div class="face back">
<label class="text">Update Details</label>
</div>
</div>
</div>
<div class="box">
<div class="boxInner clicked">
<div class="face front">
<img src="images/s.png">
</div>
<div class="face back">
<label class="text">Share</label>
</div>
</div>
</div>
</div>
.CSS:
.wrap {
overflow: hidden;
margin: 10px;
-webkit-transform: translateZ(0);
position: relative;
top: 0px;
}
.box {
float: left;
position: relative;
width: 25%;
/* padding-bottom: 15%; */
padding-bottom: 10px;
}
.boxInner {
overflow: hidden;
margin: 10px;
-moz-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
-moz-transition: all 0.5s cubic-bezier(0.0, 0.35, .6, 1.5);
-o-transition: all 0.5s cubic-bezier(0.0, 0.35, .6, 1.5);
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
-webkit-box-shadow: #666 0px 0px 6px;
-moz-box-shadow: #666 0px 0px 6px;
box-shadow: #666 0px 0px 6px;
}
.boxInner:hover {
-webkit-box-shadow: #666 0px 0px 6px;
-moz-box-shadow: #666 0px 0px 6px;
box-shadow: #666 0px 0px 6px;
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
.boxInner img {
width: 100%;
}
.flip {
-webkit-transform: rotatex(-180deg) !important;
}
.front {
z-index: 1;
cursor: pointer;
opacity: 1;
}
.back {
-webkit-transform: rotatex(-180deg);
cursor: pointer;
opacity: 0;
}
.box .boxInner.clicked .back {
opacity: 1;
}
.box .boxInner.clicked .front {
opacity: 0;
}
.box .boxInner.clicked {
-webkit-transform: scaleY(-1);
}
.face {
transition: all 0.5s linear;
position:relative;
}
.text{
padding-top:35%;
position: absolute;
margin-left:35%;
color:#666666;
font-weight:bold;
font-size:100%;
}
.text::first-letter{
font-size:400%;
color:#009de0;
margin-top:10px;
}
body.no-touch .boxInner:hover .titleBox,body.touch .boxInner.touchFocus .titleBox
{
margin-bottom: 0;
}
@media only screen and (max-width : 480px) {
/* Smartphone view: 1 tile */
.box {
width: 100%;
}
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablet view: 2 tiles */
.box {
width: 50%;
}
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles */
.box {
width: 33.3%;
}
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.box {
width: 25%;
}
}
.JS:
$(".boxInner").click(function(){
$(this).toggleClass("clicked");
});
演示链接
这是你问的小提琴。我不擅长使用jquery
或javascript
.我已经为 toggleClass 添加了函数,但我不擅长使用它,否则CSS3 Transitions
非常流畅和清晰。只需编辑jquery和类,然后一切都很好。
相关文章:
- 通过点击按钮翻转缩略图
- IE中的CSS翻转动画:翻转的一面显示镜像内容
- 使用KineticJS变换(移动/缩放/旋转)形状
- IE中的CSS翻转动画:翻转的一面显示镜像内容
- CSS3卡翻转动画,检测是否不支持
- 布料模拟+图像上的画布变换
- d3用时钟中的两个指针变换原点
- iframe覆盖onclick变换
- 卡片翻转动画InternetExplorer11
- 如何使用拉斐尔自由变换翻转图像
- 在JQuery中将页面翻转转换为自定义url
- 更改“;比例尺;CSS中的属性“;变换”;
- 只翻转一个DIV,而不是所有DIV都属于同一类
- 远距离变换元素的宽度/高度(以像素为单位)
- 在悬停Jquery/cs3时通过翻转动画更改文本
- 如何使用CSS变换将动量/惯性添加到拖动中
- 可以't实现JavaScript翻转计数器
- 图像翻转脚本未按预期工作
- 在不同的变换中翻转磁贴
- 变换旋转和翻转效果- CSS3和jQuery