<!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. [转]python对json的相关操作

    json官方说明参见:http://json.org/ Python操作json的标准api库参考:http://docs.python.org/library/json.html 对简单数据类型的e ...

  2. jquery 文本框聚焦文字删除

    做作业需要,自己写了一个,写的很烂. $(function() { $("#search_input").addClass("before_focus");/* ...

  3. Python环境配置及项目建立

    一.安装Python Python比较稳定的两个版本是Python 3.5和Python 2.7,我用的是Python 2.7,下载地址是:https://www.python.org/downloa ...

  4. HTML&CSS基础学习笔记1.33-元素选择器

    元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...

  5. Expires、Last-Modified、Etag缓存控制

    当请求一个页面时,如果浏览器使用本地缓存,因此我们经常会看到一个HTTP请求为304状态.或者显示200状态,在chrome下标注是from cache,在火狐下会标注BFCache: 我们希望在服务 ...

  6. TCP\UDP链接的异同

    简单的说TCP与UDP的区别是有无连接状态.TCP是有连接状态的,而UDP没有,所以TCP是一种比较安全的通讯协议,而UDP则比较方便 TCP 127.0.0.1:1026 0.0.0.0:0 LIS ...

  7. 微信小程序开发之大坑记之post请求

    原文:http://blog.csdn.net/walkingmanc/article/details/54237961 在微信小程序开发过程中,如果你完全按照官方文档来,那么恭喜你,90%的可能性你 ...

  8. python——os模块操作文件

  9. 百度统计js被劫持用来DDOS Github的JS注释

    前几天在乌云看见了百度统计js被劫持用来DDOS Github,就想看看执行的核心JS是怎么样请求的. 就分析了下JS的执行,发现乌云解析的地方说错了. 文章里面说.大概功能就是关闭缓存后每隔2秒加载 ...

  10. UOJ 52 元旦激光炮

    http://uoj.ac/problem/52 题意:每次可以得到3个序列中 思路:每次分别取出三个序列的K/3长度的位置,取最小的那个,然后每次减掉它,总复杂度是Nlog3N #include & ...