<!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. Ubuntu 16.04出现：qmake: could not exec '/usr/lib/x86_64-linux-gnu/qt4/bin/qmake': No such file or directory

    没有安装qt4-qmake,安装即可: sudo apt-get install qt4-qmake 参考: https://stackoverflow.com/questions/23703864/ ...

  2. Oracle Warehouse Builder(OWB) 安装报seeding owbsys错误的解决

    今天在RHEL6.4上安装Oracle Warehouse Builder 11.2时在最后一步报错,打开日志查看有例如以下信息: main.TaskScheduler timer[5]2014052 ...

  3. bootstrap模态框出现或者消失的回调函数

    当某一模态框出现的时候就触发函数: $(".modal").on('show.bs.modal',function(){ if(vueObj){...}else{//如果vue对象 ...

  4. PHP在浏览器上跟踪调试的方法以及使用ChromePhp、FirePHP的简介

    之前用ThinkPHP时发现有个 trace 函数能够跟踪调试,感觉非常有意思.网上搜索了下类似的东西.发现了 ChromePhp ,曾经没想过这样来调试 PHP 程序.感觉非常方便,非常实用. Th ...

  5. 2016/1/21 练习 arraylist 1，添加 add（） 2，遍历集合

    package shuzu; public class Customer { //从源码中 使用字段生成构造函数 public Customer(String good, int price) { s ...

  6. JBOSS和EJB学习一

    1.使用软件 IDE:Eclipse4.3(开普勒) EE版本 服务器:jboss EAP 6.2 eclipse-jboss plugin:jbosstools-Update-4.1.2.Final ...

  7. 00020970-0000-0000-C000-000000000046

    00020970-0000-0000-C000-000000000046 System.InvalidCastException: 无法将类型为“Microsoft.Office.Interop.Wo ...

  8. iOS开发个人开发账号的证书详细使用及介绍

    本人也和大家一样在学习iOS的开发,在开发当中最烦的就是证书出问题,主要是没有理解透证书的含义,因此查阅了一些资料,才对证书有了一定的认识,本文章就是介绍个人的个人理解,有不对的地方大加可以留言提醒, ...

  9. dom小练习

    dom小练习 学习要点 综合运用学过的知识完成几个综合小练习,巩固学过的知识. 阶段小练习8-1:改变网页字体的大小 要求和提示: 要求:当用户选择‘大/中/小’的选项时,页面字体发生相应的变化 阶段 ...

  10. 从service启动activity startActivity慢 的解决方案

    Intent intent = new Intent(context, A.class); intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); Pendin ...