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

<!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. jQuery中事件冒泡问题及处理

    在为一个元素添加事件时,经常会出现的一个问题就是事件冒泡.例如在div中嵌套了一个span元素,为div和span都添加了事件点击,如果点击span会导致span和div元素相继触发监听事件.顺序是从 ...

  2. js实现输入验证码

    html部分: <div> <input type="text" id="input" /> <input type=" ...

  3. .ctor，.cctor 以及 对象的构造过程

    摘要: .ctor,.cctor 以及 对象的构造过程.ctor:简述:构造函数,在类被实例化时,它会被自动调用.当C#的类被编译后,在IL代码中会出现一个名为.ctor的方法,它就是我们的构造函数, ...

  4. [ JS 进阶 ] 如何改进代码性能 (3)

    原文链接 总结一下 1.减少操作dom的次数 2.需要多次使用某全局变量的时候,将其赋给一个局部变量,避免重复查找 3.优化循环 4.多用逗号和直接赋值的方式来var,减少工厂方式和构造函数方式创建对 ...

  5. Yii2的相关学习记录，后台模板和gii（三）

    前面已经可以正常登录,但我们需要体验下最常用的增删查改的操作.这里就需要gii,通过gii可以方便的生成表单.表格的框架,不需要我们再写重复的东西. gii访问地址:http://localhost/ ...

  6. PHP文件类型检查类-比较全的

    在CSDN上淘来的一个文件类型的类,还不错,留下自己看! <? /** * 检证文件类型类 * * @author */ class FileTypeValidation { // 文件类型,不 ...

  7. 或许是python yield最好的答案 ？

    地址:http://pyzh.readthedocs.org/en/latest/the-python-yield-keyword-explained.html#yield 译者: hit9 原文: ...

  8. 使用Gson进行json数据转换（list to json 和json to list）

    文章借鉴自:http://blog.csdn.net/binyao02123202/article/details/7540407 下面是一个简单的例子: Java代码 public class Pe ...

  9. Solr4.8.0源码分析(19)之缓存机制(二)

    Solr4.8.0源码分析(19)之缓存机制(二) 前文<Solr4.8.0源码分析(18)之缓存机制(一)>介绍了Solr缓存的生命周期,重点介绍了Solr缓存的warn过程.本节将更深 ...

  10. 转：etc/fstab 文件详解

    etc/fstab这个文件的所有参数,这个文件是非常重要的.这个文件是配置文件系统的体系,创建的所有分区,都必须写在这个文件里面,否则下次启动的时候你的分区是挂不起来的.首先学习一个mount –a ...