照片翻转的二种方式

最近在学习使用动画效果，经常去鑫空间翻看大神写得博客，最近看到最新3月份出炉的博客–小tips: 在canvas上实现元素图片镜像翻转动画效果，我就想到自己也有需要展示照片的时候，只实现过一种鼠标mouseover时照片放大，鼠标mouseleave时照片复原的效果，实在是太简陋了！看到这个canvas图片水平镜像翻转动画实例页面后，很想在用css实现这个效果（后话是css实现太简单了）。

1.css展示的2种方式

我想到2种使用css实现照片旋转的方式，其一是hover，其二是点击事件绑定class。其核心代码是：

ul li >section{transition: 0.6s;
}
ul li:hover .back{transform: rotateY(180deg);
}
ul li .back2{transform: rotateY(180deg);
}

大家是不是觉得很low，寥寥几行代码，想哭的心都有了，原来css的实现方式就是这么简单。

2.页面代码

<template><section><h1>照片旋转演示组件</h1><section id="container"><ul><li><section class="back"><img src="~assets/img/people/1.jpg" alt="" ></section><p>CSS方式一：hover</p></li><li @click="isPositive = !isPositive"><section :class="isPositive ? 'back2' : ''"><img src="~assets/img/people/2.jpg" alt="" ></section><p>CSS方式二：点击事件绑定class</p></li><li @click="onFlip"><section><img src="~assets/img/people/3.jpg" alt="" id="img" ></section><p>JS方式一：使用Tween.js动画算法加载不同旋转角度</p></li></ul><select v-model="picParam.algorithm"><option v-for="item in tweenStr.algorithm" v-text="item"></option></select><select v-model="picParam.rapidity"><option v-for="item in tweenStr.rapidity" v-text="item"></option></select></section></section>
</template>

3.使用Tween.js运动缓动算法实现照片翻转，更加灵活！

看到了大神张花废篇幅介绍的运动缓动算法Tween.js，就特别想在照片翻转中用到它！这个算法用于实现动画效果的，而且代码量特别少，使用灵活。
Tween.js使用示例如下：

// 使用Tween.js动画库实现图片翻转onFlip () {let self = thisif (self.picParam.isMove) {return}self.picParam.isMove = true// 水平翻转动画let img = document.getElementById('img')Math.animation(-180 + self.picParam.deg, 0 + self.picParam.deg, 600, self.picParam.algorithm + '.' + self.picParam.rapidity, function (value, isEnding) {img.style.transform = 'rotateY('+value+'deg)'if (isEnding) {self.picParam.isMove = falseself.picParam.isflip = !self.picParam.isflipself.picParam.deg = self.picParam.isflip ? 0 : 180}})}

实现效果如下：

使用css3和tween.js二种方式实现照片翻转相关推荐

Ajax的异步同步原理以及js几种方式的实现
Ajax的异步同步原理以及js几种方式的实现的个人详细解析 Ajax简介 Ajax的全称是:Asynchronous JavaScript And XML,指的是异步 JavaScript 及 XML ...
Python之selenium的打开浏览器的二种方式
Python之selenium的打开浏览器的二种方式文章目录 Python之selenium的打开浏览器的二种方式第一步我们要先按照selenium: 第一种打开方式: 第二种打开方式: 第一步我 ...
Unity Android 之获取系统语言（手机设备设置的系统语言）的二种方式（中文区分简体、繁体、日文）
Unity Android 之获取系统语言的二种方式(中文区分简体.繁体.日文) 目录 Unity Android 之获取系统语言的二种方式(中文区分简体.繁体.日文) 一.简单介绍二.实现原理 ...
js中遍历数组加到新数组_JS数组遍历的十二种方式
遍历有如下几种方式数组方法 map forEach filter find findIndex every some reduce reduceRight 其他方法 for for in for o ...
vue.js 三种方式安装(vue-cli)
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
【CSDN软件工程师能力认证学习精选】vue.js 三种方式安装(vue-cli)
CSDN软件工程师能力认证(以下简称C系列认证)是由中国软件开发者网CSDN制定并推出的一个能力认证标准.C系列认证历经近一年的实际线下调研.考察.迭代.测试,并梳理出软件工程师开发过程中所需的各项技 ...
Spark读写Hbase的二种方式对比
作者:Syn良子出处:http://www.cnblogs.com/cssdongl 转载请注明出处一.传统方式这种方式就是常用的TableInputFormat和TableOutputForm ...
关于Vue下组件引入第三方外部Js几种方式
第一种方式:利用Vue的mounted生命周期 const oScript = document.createElement('script'); oScript.type = 'text/javas ...
mongodb存储二进制数据的二种方式——binary bson或gridfs
python 版本为2.7 mongodb版本2.6.5 使用mongodb存储文件,可以使用两种方式,一种是像存储普通数据那样,将文件转化为二进制数据存入mongodb,另一种使用gridfs,咱们 ...

使用css3和tween.js二种方式实现照片翻转

照片翻转的二种方式

1.css展示的2种方式

2.页面代码

3.使用Tween.js运动缓动算法实现照片翻转，更加灵活！

使用css3和tween.js二种方式实现照片翻转相关推荐

最新文章

热门文章