<!DOCTYPE html>
<html>
<head>
<title>guodu</title>
<meta charset="utf-8">
<style type="text/css">
#wp{
border: 1px solid red;
width: 500px;
height: 500px;
background-color: pink;
color: lime;
transition-property: background color;
transition-duration: 5s;
transition-timing-function: cubic-bezier(0 0 0.2 0.2);
transition-delay: 1s;
transform: perspective(600px);
}
#wp:hover{
background: red;
color: white;
width: 800px;
transform-origin: (150px 100px 120px);
transform: skewY(80deg) rotate(45deg) translate(50%) ;
}
</style>
</head>
<body>
<div id="wp"><h1>南海是中国的，菲律宾也是中国的</h1></div>
</body>
</html>

css过渡+3D的更多相关文章

  1. 深入理解CSS过渡transition

    × 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...

  2. Vue过渡效果之CSS过渡

    前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...

  3. 047——VUE中css过渡动作实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. css过渡和2d详解及案例

    css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...

  5. 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​

  6. Vue css过渡 和 js 钩子过渡

    css过渡 <transition name="slide"> <div v-show="!showChatInput" class=&quo ...

  7. CSS过渡、CSS动画

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script s ...

  8. html + css 01: 3d立方体

    html + css实现3d立方体 css代码 /*页面背景色*/ body{ background-color: black; background-repeat:no-repeat; } /*** ...

  9. CSS过渡、动画及变形的基本属性与运用

    [逆战班] 动画可以让一个元素具有动态的效果,这个过程是使元素从一种样式变成另一个样式的过程.我们可以通过设置关键帧的方法来控制动画在某个时间节点的运动方式.通常设置多个节点来实现复杂的动画效果.0% ...

随机推荐

  1. Qt中widget重新setParent需要注意的问题

    有时候需要在widget中重新setParent,但会发现setParent有时候会出现问题,比如子窗口不在刷出来等等. 其实,有一点是需要注意的,就是Qt文档里说的,如果你当前widget重新设置了 ...

  2. flvplayer.swf flv视频播放器使用方法

    今天由于网页上要加入一个视频文件,就研究了一下flv视频播放器flvplayer.swf      :   关于SewisePlayer  插件 演示例子链接   一.直接在html文件中加载: &l ...

  3. Dapper inner join

    Dapper中的一些复杂操作和inner join应该注意的坑 上一篇博文中我们快速的介绍了dapper的一些基本CURD操作,也是我们manipulate db不可或缺的最小单元,这一篇我们介绍下相 ...

  4. C#.Net参数

    C#.Net参数 阅读目录 引言 形参和实参 命名实参 可选参数 params,数目可变参数 方法解析与重载决策 参数传递      [重难点] ref引用参数/out输出参数   参数修饰符 泛型类 ...

  5. 2016-12-14jq笔记

    1.在jq中声明一个数组的方法有两种: 1.var a=new  Array(): 2 var b=[]; (效果一致) 2.bind()和live()的区别 3.animate的用法 4.place ...

  6. C# 基于委托的事件

    事件基于多播委托的特性. 多播委托事实上就是一组类型安全的函数指针管理器,调用则执行顺序跳转到数组里所有的函数指针里执行. class Program { public class CarInfoEv ...

  7. Objective-C释解 Target-Action模式

    Objective-C释解 Target-Action模式   Target-Action模式是ObjC里非常常见的对象之间方法调用的方式,不过ObjC把方法调用叫做Send Message. 一帮情 ...

  8. java开发规范

    hbh 开发规范文档 一:目的 使本组织能以标准的,规范的方式设计和编码.通过建立编码规范,以使每个开发人员 养成良好的编码风格和习惯:并以此形成开发小组编码约定,提高程序的可靠性,可读性, 可修改性 ...

  9. Ant快速入门(二)-----使用Ant工具

    使用Ant非常简单,当正确安装Ant后,只要输入ant或ant.bat即可. 如果运行ant命令时没有指定任何参数,Ant会在当前目录下搜索build.xml文件.如果找到了就以该文件作为生成文件,并 ...

  10. 转： 如何用linux命令修改linux主机ip网关子网掩码

    linux一般使用ifconfig命令修改linux主机的ip.网关或子网掩码. 1．命令格式: ifconfig [网络设备] [参数] 2．命令功能: ifconfig 命令用来查看和配置网络设备 ...