<!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. Java学习----变量是什么

    1.变量必须拥有的类型 2.变量必须拥有的名字 变量:具备名字和类型的可以存放类型匹配的数据的量 public class Student { public static void main(Stri ...

  2. 零散的笔记：jquery中的事件

    1.替代mouseover和mouseout的事件 jquery的mouseover和mouseout事件在移到子页面时也会触发,这在移到一级菜单弹出二级菜单,移到二级菜单时一级菜单也要显示时,这两个 ...

  3. ASP.NET WEB API 2 框架揭秘 读书笔记（一）

    第一章 概述 主要内容是介绍Web的基本概念,Restfull的基本概念及特性.最后介绍创建简单WebApi程序的步骤. Web的基本概念 IP/TCP协议簇分层,分为两种 链路层->网络层-& ...

  4. python学习第十七天 --定制类

    何为定制类? Python的class允许定义许多特殊方法,可以让我们非常方便地生成特定的类.在类中应用或者重写python的特殊方法,得到的类,就是定制类. 大家都知道print的用法.见下面例子 ...

  5. 使用Ajax.ActionLink时，点击对应的按钮会重新加载一个页面，而不是在当前页面的指定模块加载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. TCP回射客户程序：main函数

    创建套接字,装填网际网套接字地址结构 创建一个TCP套接字,用服务器的IP地址和端口号装填一个网际网套接字地址结构 我们可从命令行参数取得服务器的IP地址 从头文件unp.h取得服务器的众所周知端口号 ...

  7. iOS页面间传值的方式 （Delegate/NSNotification/Block/NSUserDefault/单例）

    iOS页面间传值的方式(Delegate/NSNotification/Block/NSUserDefault/单例)   iOS页面间传值的方式(NSUserDefault/Delegate/NSN ...

  8. 【Oracle】Windows 7下完全卸载Oracle 11g数据库

    闲来无事,想把Oracle 11g重装一下,记录如下:   (1)首先在服务中停止所有的Oracle服务:   (2)开始 -> 程序 -> Oracle-OraDb11g_home1 - ...

  9. 【Maven实战】Maven开发环境的搭建和案例展示

    1.首先到www.apache.org中下载maven,得到一个apache-maven-3.1.0-bin.zip的压缩包. 2.将此压缩包解压,这里解压到D:\docs中,然后找到maven的bi ...

  10. hdu 3400 Line belt

    题意:给你两条线段AB,CD:然后给你在AB,CD上的速度P,Q,在其它部分的速度是R,然后求A到D的最短时间. 思路:用三分枚举从AB线段上离开的点,然后再用三分枚举在CD的上的点找到最优点,求距离 ...