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

<!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. HTML cellpadding与cellspacing属性

    单元格(cell) -- 表格的内容 单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间 单元格间距(表格间距)(cellspacing) - ...

  2. 水仙花 AC 杭电

    水仙花数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  3. mongodb 教程三

    mongodb 实际上是保存json的数据的结构.当查询 是修改时 key 是可以用''保存. mongodb  插入语句 db.weixin.insert({name:'zhangfeng',age ...

  4. jQuery的live绑定事件在mobile safari（iphone / ipad / ipod）上失效的解决方案

    jQuery的live绑定为什么会在mobile safari上失效呢?其实可以追溯到jQuery里live的实现方式.live的实现方式实际上是通过事件委托机制来实现的,也就是说是通过诸如冒泡的方式 ...

  5. LaTeX排版工具使用

    专业的论文,都是用Latex.CTex等相关的工具.那么,用word写论文,缺点在哪? latex 写的东西,最终要编译成pdf格式的.里面的格式,尤其是数学类符号等,比较漂亮.这是word不能比的. ...

  6. 基于Minifilter框架的文件过滤驱动理解

    概述 Minifilter即File System Minifilter Drivers,是Windows为了简化第三方开发人员开发文件过滤驱动而提供的一套框架,这个框架依赖于一个称之为Filter ...

  7. SRM475 - SRM479(1-250pt,500pt)

    SRM 475 DIV1 300pt 题意:玩游戏.给一个棋盘,它有1×n(1行n列,每列标号分别为0,1,2..n-1)的格子,每个格子里面可以放一个棋子,并且给定一个只含三个字母WBR,长度为n的 ...

  8. 什么是券商PB业务

    PB业务(Prime Broker,主经纪商业务).所谓PB业务就是指向对冲基金等高端机构客户提供集中托管清算.后台运营.研究支持.杠杆融资.证券拆借.资金募集等一站式综合金融服务的统称.而该业务的基 ...

  9. Java程序员的日常—— 垃圾回收中引用类型的作用

    在Java里面,是不需要太过于关乎垃圾回收,但是这并不意味着开发者可以不了解垃圾回收的机制,况且在java中内存泄露也是家常便饭的事情.因此了解垃圾回收的相关知识就显得很重要了. 引用,在垃圾回收中是 ...

  10. UML的六种关系

    UML定义的关系主要有:泛化.实现.依赖.关联.聚合.组合,这六种关系紧密程度依次加强,分别看一下 泛化 概念:泛化是一种一般与特殊.一般与具体之间关系的描述,具体描述建立在一般描述的基础之上,并对其 ...