CSS动画翻转的效果

想要实现一个翻转的动画效果，那么我们就要掌握css3动画里面的知识点，下面我来给大家讲解一下。
布局如下：

<div class="box"><ul><li class="card"><div class="card-on card-on2"><img src="img/fanmian.jpg" alt=""></div><div class="card-in card-on card-in2"><img src="img/zhengmian.jpg" alt=""></div></li><li class="card"><div class="card-on card-on2"><img src="img/fanmian.jpg" alt=""></div><div class="card-in card-on card-in2"><img src="img/zhengmian.jpg" alt=""></div></li></ul></div>

给每个li一个左浮动；
在给“card”这个类设置一个position：relative（相对定位）；
给“card-on ”这个类设置一个动画过渡效果transition: all 0.8s ease。以及position：absolute（绝对定位）；
翻转时背面的元素就要隐藏起来我们就给他来一个属性backface-visibility:hidden;他的默认值是visible（可见的）。最后在设置一个阴影的效果，增加立体感。

.card-on{transition: all 0.8s ease;position: absolute;top: 0px;left: 0px;height: 366px;width: 238px;backface-visibility:hidden;border-radius: 10px;overflow: hidden;box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);}

这里普及一下 transition他是一个复合属性；他有几个子属性分别是：
（1） transition-property：指定过渡或动态模拟的 CSS 属性；
（2） transition-duration：指定过渡完成所需的时间；
（3） transition-timing-function：指定过渡函数；
（4） transition-delay：指定开始出现的延迟时间；

给“card-in”这个类添加一个transform 属性，属性值为rotateY(180deg)意思是在y轴上顺时针旋转180°；
给“card”添加一个伪类鼠标放上去“card-on2”逆时针旋转180°；
最后再给“card”添加一个伪类鼠标放上去“card-in”旋转0°；见实现代码。

.card-in{transform: rotateY(180deg);}.card:hover .card-on2{transform: rotateY(-180deg);} .card:hover .card-in{transform: rotateY(0deg);}

CSS动画翻转的效果相关推荐

使用css动画实现loding效果
代码如下: <!doctype html> <html><head><meta charset="ulf-8"><title& ...
CSS动画实现心跳效果
CSS动画实现心跳效果简介实现步骤代码效果简介使用CSS动画animation 和tranform(缩放.旋转). 实现步骤添加p元素内容之前/之后插入,一个宽为100px,高为160p ...
利用css动画实现打字机效果
简言通过使用css的animation(动画属性)实现文字显示的打字机效果. 单行思路实现步骤: 将文本框属性设置为等宽字体,计算文本框的字数,设置文字大小.相对布局等. 将文本框隐藏,通过动画 ...
HTML5动画-翻转音乐盒效果动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
css动画放大缩小效果
1.实现星星变大变小忽闪的感觉 html: <div class="xing_one my_xing"><img src="~@/static/imag ...
【实战】用CSS实现文本打字机效果
之前,我们的文章中已经有通过 JS 的方式实现文本打字机的效果了,具体可以看这篇文章: [前端三分钟]利用Javascript实现打字效果在本文中,你将学习如何使用纯CSS实现打字机效果,使网站的文 ...
镜像css3,利用css动画属性rotate来实现镜像翻转_WEB前端开发
layui中使用的一些弹出框_WEB前端开发 Layui是一款采用自身模块规范编写的情怀型前端UI框架,本文就来为大家介绍一下layui中使用的一些弹出框,希望对大家有一定的帮助. 要实现镜像翻转,有 ...
php图片镜像翻转,利用css动画属性rotate来实现镜像翻转
要实现镜像翻转,有两种实现方法: 方法一:利用css动画属性rotate旋转来实现具体代码:.mirrorRotateLevel { transform: rotateY(180deg); /* 水 ...
html和css3 js 3D 相框动画翻转效果id1084-网页前端设计
html和css3 js 3D 相框动画翻转效果id1084-网页前端设计源码下载地址在新演示地址 <!DOCTYPE html> <html lang="en&quo ...
css照片翻转动画（当鼠标悬停在图片上方时图片翻转）
css照片翻转动画第一次写博客也不知道怎么排版有什么建议私信我 - 鼠标悬停时图片旋转到垂直于视线的90度位置文字介绍旋转在垂直于视线的位置这是html代码 <!DOCTYPE h ...

CSS动画翻转的效果

CSS动画翻转的效果相关推荐

最新文章

热门文章