Vue实现牌面翻转效果

本文实例为大家分享了Vue实现牌面翻转效果的具体代码,供大家参考,具体内容如下

1.实现效果

实现一个点击沿中心Y轴翻转的翻转效果。

2.方法

分前(front)、后(behind)两部分,behind的div通过css布局设定为将其翻转180度在front的div后面隐藏不显示,点击执行翻转动画,在执行翻转动画的时候设置behind的div显示,之后将front的div隐藏.依次反复。

3.具体代码

<template>
<div id="try">
 <!-- box_rolling下执行正面翻转动画   -->
<div class="rollbox" :class="{'box_rolling':isRolling}" @click="isRolling = !isRolling">
 <!-- 前面div -->
 <div class="rollbox_front">
  <div class="contentbox">
   <img src="@/assets/images/s1.png"/>
  </div>
 </div>
 <!-- 后面div -->
 <div class="rollbox_behind">
  <div class="contentbox">
   <img src="@/assets/images/s2.png"/>
  </div>
 </div>
</div>
</div>
</template>
<script>

export default{
 name:'try',
 data(){
  return{
   isRolling:false
  }
 }
}
</script>
<style lang='scss'>
#try{
 .rollbox{
  position: relative;
     perspective: 1000px;
  width:200px;
  height: 400px;
  margin:100px auto;

    &_front,
    &_behind{
   transform-style: preserve-3d; //表示所有子元素在3D空间中呈现
       backface-visibility: hidden;  //元素背面向屏幕时是否可见
        transition-duration:.5s;
     transition-timing-function:'ease-in';
   background:#008080;
   .contentbox{
    width:200px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    >img{
     width:100px;
    }
   }
    }
    &_behind{
      transform: rotateY(180deg);
      visibility:hidden;  //元素不可见,但占据空间
      position: absolute;
      top:0;
      bottom:0;
      right: 0;
      left: 0;
    }
 }
 .box_rolling{
    .rollbox_front{
      transform: rotateY(180deg);
      visibility:hidden;
    }
    .rollbox_behind{
      transform: rotateY(360deg);
      visibility:visible;
    }
  }
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-07-21

Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】

本文实例讲述了Vue图片浏览组件v-viewer用法.分享给大家供大家参考,具体如下: v-viewer 用于图片浏览的Vue组件,支持旋转.缩放.翻转等操作,基于viewer.js. 从0.x迁移 你需要做的唯一改动就是手动引入样式文件: import 'viewerjs/dist/viewer.css' 安装 使用npm命令安装 npm install v-viewer 使用 引入v-viewer及必需的css样式,并使用Vue.use()注册插件,之后即可使用. <template> &

vue实现点击翻转效果

用vue简单实现一个点击翻转的效果,供大家参考,具体内容如下 1. 2. 3. //html代码 测试 demo命名随便复制来的 <div class="Demo"> <div class="Before" :class="isTop ? 'contain-Before' : ''" @click="handleBefore"></div> <div class="After

vue iview多张图片大图预览、缩放翻转

本文实例为大家分享了vue iview多张图片大图预览,可缩放翻转,供大家参考,具体内容如下 先看效果: 完整项目代码地址 具体代码如下: <style lang="less"> @import "../advanced-router.less"; </style> <template> <div class="balance-accounts"> <Row class-name="

Vue.js实现大屏数字滚动翻转效果

大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最终实现的效果: 整体思路: 在实现此效果之前,我们先来捋一下思路,用思维导图来设计一下我们的实现步骤,如下: 你可以审查元素,下载数字背景图片,复制图片地址,或者使用其他背景图片.背景颜色 有了以上的设计流程,我们先来简单实现一下: // CSS代码 <style> .box-item { position: relative; display: inline-

vue实现卡片翻转轮播展示

vue卡片翻转轮播展示,同时在翻转时切换数据,供大家参考,具体内容如下 效果及代码 代码: <template> <div class="list-container"> <div class="reason" v-if="list1.length > 0 || list2.length > 0"> <div class="logo"> <svg-icon cl

基于vue+ bootstrap实现图片上传图片展示功能

效果图如下所示: html ..... ....... <-- key=idPicUrl --> <div class="col-sm-7" > <img :src="queryFirmInfo[key]" alt="" style="max-height:200px;max-width:250px" class="myimage" :name="key"

Vue.js仿微信聊天窗口展示组件功能

源码:https://github.com/doterlin/vue-wxChat 演示地址:https://doterlin.github.io/vue-wxChat/ 运行 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 介绍 支持文本和图片的展示(后续将

vue+vuex+json-seiver实现数据展示+分页功能

一丶项目分析 1.UI: 2.接口信息: 二丶项目环境 Mockjs:生成模拟数据(含中文名,以及地址) json-server:模拟后端接口 webpack-dev-server:开启服务器环境+接口代理 jquery:使用jquery的ajax拉取数据 vue+vuex:vuex负责数据交互,vue渲染页面 iviewui:ui组件,方便布局 搭建开发环境 1.基本环境 Vue起步(无cli) 安装: npm install --save Mockjs 使用: 详细API:mockjs.co

vue.js层叠轮播效果的实例代码

最近写公司项目有涉及到轮播banner,一般的ui框架无法满足产品需求:所以自己写了一个层叠式轮播组件:现在分享给大家: 主要技术栈是vue.js ;javascript;jquery:确定实现思路因工作繁忙,暂时不做梳理了:直接贴代码参考: 此组件是基于jquer封装,在vue项目中使用首先需要先安装jquery插件:指令:npm install jquery,安装完成之后再webpack.base.conf.js配置插件: plugins: [ new webpack.ProvidePlug

React为 Vue 引入容器组件和展示组件的教程详解

如果你使用过 Redux 开发 React,你一定听过 容器组件(Smart/Container Components) 或 展示组件(Dumb/Presentational Components),这样划分有什么样的好处,我们能否能借鉴这种划分方式来编写 Vue 代码呢?这篇文章会演示为什么我们应该采取这种模式,以及如何在 Vue 中编写这两种组件. 为什么要使用容器组件? 假如我们要写一个组件来展示评论,在没听过容器组件之前,我们的代码一般都是这样写的: components/Comment

vue实现浏览器全屏展示功能

1.项目中使用的是sreenfull插件,执行命令安装 npm install --save screenfull 2.安装好后,引入项目,用一个按钮进行控制即可,按钮方法如下: toggleFullscreen() { if (!screenfull.enabled) { this.$message({ message: 'you browser can not work', type: 'warning' }) return false } screenfull.toggle() } 试了一

vue实现匀速轮播效果

本文实例为大家分享了vue实现匀速轮播效果的具体代码,供大家参考,具体内容如下 不多描述了 直接代码吧 <template> <div> <div class="box"> <ul class="ullist" @mouseleave="clearTimeout" @mouseenter="beginTimeout"> <li><img src="@/

使用Vue制作图片轮播组件思路详解

之前一直都没有认真的写过一个组件.以前在写业务代码的过程中,都是用的别人封装好的组件,这次尝试着写了一个图片轮播组件,虽然比不上知名的轮播组件,但它的功能基本完整,而且在写这个组件的过程中,学的东西也很多,在这里也给大家分享出来,如有疏漏,欢迎指正! 在制作这个组件之前,笔者google了不少关于轮播的文章,发现实现一个轮播的思路虽然各有不同,但是大的逻辑其实差不多,本文主要依据慕课网上焦点轮播图特效这节课,不过慕课网主要用原生JS写,而笔者则用Vue进行了重构,并且进行了一点修改.完成后的组件

基于vue实现swipe轮播组件实例代码

项目背景 图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如Swiper. 但是当项目中的图片轮播只需要一个很简单的轮播样式,比如这样的 我们引用这样一个110k的大插件,就大材小用了.再安利一下,swiper2.x和swiper3.x对移动和PC端支持情况如下图 当当当当~~~ 我们今天的主角登场了,thebird/Swipe,这个插件完成了图片轮播需要的基本功能,只有14.2k,真真的轻量级 啊.还有,还有 翻译一下,就是俺们全支持,不管你是PC端(IE7+)还是移动端浏览器.此

Vue 过渡实现轮播图效果

Vue 过渡 Vue 的过渡系统是内置的,在元素从 DOM 中插入或移除时自动应用过渡效果. 过渡的实现要在目标元素上使用 transition 属性,具体实现参考Vue2 过渡 下面例子中我们用到列表过渡,可以先学习一下官方的例子 要同时渲染整个列表,比如使用 v-for,我们需要用到 <transition-group> 组件 Vue 轮播图 我们先看这样一个列表 <ul> <li v-for="list in slideList"> <i