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

<!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. js 得到当前季度

    Date.prototype.getQuarter = function() { var month = this.getMonth(); if(month < 3) { return '第一季 ...

  2. element的height与width

    关于一个element所有的高度宽度 ele.style.width,ele.style.height:操纵style样式.+"px" offsetWidth.offsetHeig ...

  3. 逻辑很重要：一句sql语句的事，自己却想了半天，绕了个大弯子

    问题:系统升级后审核认证信息分别写入两个表,现在需要链接用户表和相应的新旧审核表获取字段值? 钻进胡同里:一直纠结于升级之后的会员信息从新表查,升级之前的数据从旧表查,纠结于根据时间戳分条件判断, 其 ...

  4. span宽度高度设置

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. MYSQL 存储过程1、SQL存储过程的基础知识

    在深入理解MySq之前,我们先理下一些简单的问题 Q:什么是存储过程?(stored procedure) A:是一段写好的SQL代码,特别的就是它是存在数据库的目录里.所以外部程序可以直接调用数据库 ...

  6. hdu 4548 第六周H题(美素数)

    第六周H题 - 数论,晒素数 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   De ...

  7. 转:尝试用Gearman实现分布式处理（PHP）

    原文来自于http://blog.csdn.net/fdipzone/article/details/7166520 本文需要你已对Gearman有个大致了解. 顺便再推荐两篇参考文章http://h ...

  8. 用C#实现网络爬虫（二）

    上一篇<用C#实现网络爬虫(一)>我们实现了网络通信的部分,接下来继续讨论爬虫的实现 3. 保存页面文件 这一部分可简单可复杂,如果只要简单地把HTML代码全部保存下来的话,直接存文件就行 ...

  9. SPSS相关和回归分析

    1.语文和数学成绩都受IQ的影响而且相互影响,则分析语文和数学的关系时需要偏相关分析.2.距离分析用于探索相似性,比如给了某年的12个月三个城市的气温数据,然后分析,会得到一个相似性矩阵,这是个对称阵 ...

  10. 【手机安全卫士01】项目Splash页面的开发与设计

    首先建立一个安卓的项目,然后修改manifest.xml文件,修改应用程序的logo和显示名称,效果图如下: 对应的代码如下: <?xml version="1.0" enc ...