积累很重要。从此开始记录前端生涯的点滴....

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div
        {
            width:150px;
            height:30px;
            background-color:#f83944;
            /* Rotate div */
            transform:rotate(-40deg);
            -ms-transform:rotate(-40deg); /* Internet Explorer */
            -moz-transform:rotate(-40deg); /* Firefox */
            -webkit-transform:rotate(-40deg); /* Safari 和 Chrome */
            -o-transform:rotate(-40deg); /* Opera */
            position:absolute;
            left:-50px;
            text-align:center;
        }
        .div_text{
            color:#ffffff;
            height:30px;
            line-height:30px;

        }
    </style>
</head>
<body>

<div><span class="div_text">预热</span></div>
</body>
</html>

商品标签例子——CSS3 transform 属性的更多相关文章

  1. CSS3 transform 属性

    CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...

  2. 【CSS3 transform属性和过渡属性详解】

    CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...

  3. css3 transform属性多值的顺序问题

    对于transform属性的多值的顺序问题,我自己就被困扰过.后来知道了跟顺序有关,但是不知道为什么.我想应该很多人跟我以前一样,知其然不知其所以然.如果不知道的,也许这篇文章会对大家有所帮助. 先来 ...

  4. CSS3 transform属性

    说明: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行移动(translate).旋转(rotate).缩放(scale)或倾斜(skew) transition属 ...

  5. CSS3 transform 属性(2D,3D旋转)

    一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...

  6. CSS3 transform 属性详解(skew, rotate, translate, scale)

    写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...

  7. CSS3 transform 属性 旋转 div 元素

    div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...

  8. 自己做得一个用于直观观察css3 transform属性中的rotate 3D效果

    这段代码还是非常简单,是看了一个老师的视频受的启发,也是调用了很多个函数,所以比较杂乱吧! <!DOCTYPE html><html lang="en">& ...

  9. CSS3 transform rotate（旋转）锯齿的解决办法

    -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...

随机推荐

  1. mybatis 学习笔记(4) —— 批量新增数据

    1.业务是从前台传入List<T> ,在controller层接受参数,并进行批量新增操作. 2.需要处理的细节 a) mybatis可以支持批量新增,注意数据表需要将主键设置成自增列. ...

  2. nodejs 初学笔记

    首先到nodejs的官网安装nodejs,地址nodejs.org,网站第一页会根据你的电脑系统推荐你适合的版本,下载,不断next,在cmd中输入 node -v 可以看到版本的话,即安装成功. 说 ...

  3. [Git]Git安装

    1.什么是Git Git是一个分布式版本控制/软件配置管理软件, git是用于Linux内核开发的版本控制工具, 与CVS.Subversion一类的集中式版本控制工具不同,它采用了分布式版本库的作法 ...

  4. mysql存储过程的权限 definer

    mysql中用户对存储过程的权限有: ALTER ROUTINE 编辑或删除存储过程 CREATE ROUTINE 创建存储过程 EXECUTE运行存储过程 存储过程的创建者拥有存储过程的ALTER. ...

  5. 模拟DOMContentLoaded事件

    window.onload事件 文档中所有图片,脚本,链接以及子框完成加载后,才会触发window.onload事件. 浏览器兼容性:All DOMContentLoaded事件 当页面中的文档树解析 ...

  6. python学习之旅：array 转 list

    最近学习python,记录学习的点滴. >>> import numpy as np >>> a = np.array([[1,2],[3,4]]) >> ...

  7. UVA - 524 Prime Ring Problem（dfs回溯法）

    UVA - 524 Prime Ring Problem Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & % ...

  8. 【转】Java 中字符串的格式化

    原文网址:http://blog.csdn.net/aimartt/article/details/8307237 参考资料:JDK API 1.6.0 中文文档 1.格式字符串语法 产生格式化输出的 ...

  9. 黑马程序员_Java基础组成

    Java语言基础组成 2.1关键字 main不是关键字,但被JVM所识别的名称. 关键字的定义和特点 定义:被Java语言赋予了特殊含义的单词. 特点:关键字中所有字母都为小写. 用于定义数据类型的关 ...

  10. DLL入门浅析(2)——如何使用DLL

    转载自:http://www.cppblog.com/suiaiguo/archive/2009/07/20/90621.html 上文我简单的介绍了如何建立一个简单DLL,下面再我简单的介绍一下如何 ...