这个小例子是hover的时候可一看到div沿着y轴转动一圈

思路：css写好动画transiton: all 1s;

　　　hover的时候给他一个状态transform:rotateY(180deg);

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css动画y轴翻转效果</title>

</head>

<body>

    <style>

div

{

width:100px;

height:100px;

background:yellow;

transition:all 1s;

}

div:hover

{

transform: rotateY(180deg);

}

</style>

</head>

<body>

<div></div>

<p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>

</html>

欢迎加入web前端开发交流群：143206839

css3 y轴翻转效果的更多相关文章

  1. 简单几步用纯CSS3实现3D翻转效果

    作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...

  2. css3图片3D翻转效果

    点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...

  3. css3实现酷炫的3D盒子翻转效果

    简介 运用css3先在平面空间组成立方体盒子,再让整个盒子翻转起来,先来张效果图: 步骤 1.先用css将6张图片摆成下图的样子: 下面就是通过css3的3D变换将每个面进行翻转,使之成为一个立体的盒 ...

  4. HTML+CSS之光标悬停图片翻转效果

    设计思路:         首先做一个包括图片和说明文字的简单的页面结构,然后再设置它的变换.将变换的元素,即照片和文字放在一个父容器里面,这就需要四个父容器 ,再将这四个父容器放在最外层的舞台上面进 ...

  5. MSChart使用之双Y轴使用

    protected void SearchChart() { Chart1.ChartAreas.Clear(); Chart1.Series.Clear(); ChartArea _ChartAre ...

  6. Winform中实现ZedGraph新增自定义Y轴上下限、颜色、标题功能

    场景 Winform中实现ZedGraph的多条Y轴(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1001322 ...

  7. Winform中设置ZedGraph多条Y轴时坐标轴左右显示设置

    场景 Winform中实现ZedGraph的多条Y轴(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1001322 ...

  8. Winforn中设置ZedGraph多条Y轴时曲线刻度不均匀问题解决

    场景 Winform中实现ZedGraph的多条Y轴(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1001322 ...

  9. css3实现色子自动翻转效果

    原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...

随机推荐

  1. 【剑指Offer】29、最小的K个数

      题目描述:   输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4.   解题思路:   本题最直观的解法就是将输入的n个整数排 ...

  2. [jzoj 5770]【2018提高组模拟A组8.6】可爱精灵宝贝 (区间dp)

    传送门 Description Branimirko是一个对可爱精灵宝贝十分痴迷的玩家.最近,他闲得没事组织了一场捉精灵的游戏.游戏在一条街道上举行,街道上一侧有一排房子,从左到右房子标号由1到n. ...

  3. 57.query phase

    主要知识点: query phase步骤 query phase如何提升性能     一.query phase步骤 一次query phase一般包括以下三个步骤     The query pha ...

  4. 阿里云 全部端口port

  5. 转载 - C++ bitset类使用与简介

    出处:http://blog.163.com/lixiangqiu_9202/blog/static/53575037201251121331412/ C++ bitset类的使用与简介   有些程序 ...

  6. PHP扩展开发--实验成功

    原文:http://kimi.it/496.html http://blog.csdn.net/u011957758/article/details/72234075 ---------------- ...

  7. 微博预计要火一阵的SleepSort之Shell及C实现

    今日在微博看到如此奇妙的代码.竟然还有新的sort算法,对于我这样的渣渣必须研究一下,代码例如以下: #!/bin.bash function f() { sleep "$1" / ...

  8. uva live 6827 Galaxy collision

    就是给出非常多点,要求分成两个集合,在同一个集合里的点要求随意两个之间的距离都大于5. 求一个集合.它的点数目是全部可能答案中最少的. 直接从随意一个点爆搜,把它范围内的点都丢到跟它不一样的集合里.不 ...

  9. 关于Linux静态库和动态库的分析

    关于Linux静态库和动态库的分析 关于Linux静态库和动态库的分析 1.什么是库 在windows平台和linux平台下都大量存在着库. 本质上来说库是一种可运行代码的二进制形式.能够被操作系统加 ...

  10. HDU 2604 Queuing，矩阵高速幂

    题目地址:HDU 2604 Queuing 题意:  略 分析: 易推出:   f(n)=f(n-1)+f(n-3)+f(n-4) 构造一个矩阵: 然后直接上板子: /* f[i] = f[i-1] ...