<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div:first-of-type{
width: 200px;
height: 200px;
background: #006400;
/*使 div 元素看上去像一个按钮：*/
appearance: button;

/*background-attachemnt: 背景定位*/
/*取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承*/
background-attachment: scroll;

border: 10px black dashed;

/*背景填充方法*/
background-clip: padding-box;

/*阴影方法*/
/*内阴影 inset*/
box-shadow: 10px 10px 10px black inset;

text-shadow: 10px 10px 10px red;

/*偏移方法*/
/*旋转方法*/
transform: rotate(30deg);
/*移动位置 左右 上下*/
transform: translate(100px,100px);
/*规模效果*/
transform: scale(2);
/*变形效果*/
transform:skew(20deg);

/*变化持续时间*/
transition: 5s;
}
div{
width: 200px;
height: 200px;
background: linear-gradient(#f4f4f4,#000000);
transition: 5s;

/*行类块标签*/
display: inline-block;
}

div:hover{
transform: rotateX(45deg) translate(100px,100px) scale(2) skew(45deg);
}
</style>
</head>
<body>
<div>道可道，非常道</div>
<div>道可道，非常道</div>
<div>道可道，非常道</div>
</body>
</html>

div常用效果方法-transform的更多相关文章

  1. iOS项目常用效果方法注意点集锦

    移动中隐藏tabBar,静止显示tabbar - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { // 隐藏tabbar ...

  2. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  3. jQuery常用属性方法大全 attr(),val()

    @@@@属性篇: 写作本篇文章的意义:jQuery的教程千千万,却没有英文版的API讲的系统.到位,一些话用中文翻译过来味道就变了,所以我将英文版的API的一些常用的方法单独提出来放在这里,并用自己的 ...

  4. jQuery 常用核心方法

    jQuery 常用核心方法 .each() 遍历一个jQuery对象,为每个匹配元素执行一个函数 $('p').each(function(idx,node){ $(node).text(idx + ...

  5. 【Puppeteer】puppeteer安装/常用的方法以及一个小栗子(Youtube油管自动评论)

    这里介绍的是Win平台的安装方法,其他平台请至Github>Puppeteer. 首先要安装node.js 可以看我这篇的开头>[Angular]学习笔记-环境部署.项目建立相关 1.新建 ...

  6. JOptionPane类提示框的一些常用的方法

    JOptionPane类提示框的一些常用的方法 XMLOracleSwing 最近在做swing程序中遇到使用消息提示框的,JOptionPane类其中封装了很多的方法. 很方便的,于是就简单的整理了 ...

  7. 常用js方法

    function dateGetter(name, size, offset, trim) { offset = offset || 0; return function (date) { var v ...

  8. jQuery操作Table tr td常用的方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  9. iOS常用公共方法

      iOS常用公共方法 字数2917 阅读3070 评论45 喜欢236 1. 获取磁盘总空间大小 //磁盘总空间 + (CGFloat)diskOfAllSizeMBytes{ CGFloat si ...

随机推荐

  1. 洛谷 P1318 积水面积

    P1318 积水面积 题目描述 一组正整数,分别表示由正方体迭起的柱子的高度.若某高度值为x,表示由x个正立方的方块迭起(如下图,0<=x<=5000).找出所有可能积水的地方(图中蓝色部 ...

  2. Ubuntu 16.04硬盘有坏道，开机显示blk_update_request:I/0 error

    可以尝试以下方式解决: 1.检查坏道(效果明显,但是比较慢,检查出来并没有什么用,只是知道有坏块) sudo badblocks -s -v -o /root/bb.log /dev/sda1 2.快 ...

  3. JSTL-格式标签库

    主页:http://www.cnblogs.com/EasonJim/p/6958992.html的分支页. 一.<fmt:formatNumber> <fmt:formatNumb ...

  4. JS函数节流代码实现

    函数被频繁调用场景 Js中的函数大多数情况下都是由用户主动调用触发的,一般不会遇到性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制.在这些场景下,函数有可能被非常频繁地调用,而造成大的 ...

  5. centos 7 静态IP，指定DNS

    cd /etc/sysconfig/network-scripts/ 找到对应的网卡,配置并编辑 ls -l vim ifcfg-em1 配置例子: TYPE="Ethernet" ...

  6. HDU4930-Fighting the Landlords

    题意:斗地主,就是要自己出牌.使得对手在这一轮无法出牌,或者有出牌的可能.可是你的牌已经走完了.假设符合这些条件的话,输出Yes.否则输出No. 思路:先预处理能直接把牌走完的情况,假设不行的话就直接 ...

  7. Oracle学习(四)：组函数

    1.知识点:能够对比以下的录屏进行阅读 SQL> --组函数类型:avg,count,max.min,sum SQL> --工资总额 SQL> select sum(sal) fro ...

  8. C#计算运行时间

    using System.Diagnostics; private Stopwatch stw = new Stopwatch(); stw.Start(); stw.Stop(); MessageB ...

  9. Apache Ignite——集合分布式缓存、计算、存储的分布式框架

    Apache Ignite内存数据组织平台是一个高性能.集成化.混合式的企业级分布式架构解决方案,核心价值在于可以帮助我们实现分布式架构透明化,开发人员根本不知道分布式技术的存在,可以使分布式缓存.计 ...

  10. 深入浅出Android makefile(1)--初探（转载）

    转载:http://nfer-zhuang.iteye.com/blog/1752368 一.说明 android build system是一个非常庞大的系统,要编译Android工程.修改或新增A ...