这个小例子是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. C#第十一节课

    类 using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Thr ...

  2. 数据类型---->Number

    Javascript中有六种数据类型 1.undefined:这个值未定义 2.boolean:这个值是布尔值 3.number:这个值是数值 4.function:这个值是函数 5.object:这 ...

  3. font-size:0消除元素间距

    容易发现,inline-block元素之间会有间距, <!DOCTYPE html> <html> <head> <title></title&g ...

  4. 【3】Django创建第一个项目

    天地所以能长且久者,以其不自生,故能长生. --老子<道德经> 写在前面:Django在学习的过程中,我们会参考官方文档,从两部分进行讲解,第一部分主要是一个入门项目的搭建开发,第二部分是 ...

  5. java IO框架分析

    jave.io框架 2010-11-10 22:18:34|  分类: 默认分类|举报|字号 订阅     可从IO的类层次,IO框架的设计模式来论述. 总体来说,IO可以分为字节流和字符流,不同在于 ...

  6. sqlalchemy根据表名动态创建model类

    作用如题,直接上代码吧,另外还支持 copy一张表的表结构,新建表并获得model对象 # coding: utf-8 import traceback from sqlalchemy import ...

  7. 南洋理工大学 ACM 在线评测系统 矩形嵌套

    矩形嵌套 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a& ...

  8. linux下apache2更换目录

    修改apache2的默认文档目录(默认是在/var/www) 修改命令:sudo gedit /etc/apache2/sites-enabled/000-default 在文档中找到 Documen ...

  9. Oracle中如何判断字符串是否全为数字

    Oracle中如何判断字符串是否全为数字 学习了:http://www.cnblogs.com/zrcoffee/archive/2012/12/11/2812744.html 本文介绍了判断字符串是 ...

  10. 我是这样记录javascript知识的------Day31

    在陆续研究了几个javascript的几个小应用后,也算对javascript有了更深一点的认识,头脑中大约都有些印象,总体上说却有些模糊,这时.我知道,是时候看看w3cshool的这部分介绍了. 没 ...