CSS3中的skew（）属性

刚开始接触CSS3的2D变换属性，就被这个skew（）搞的一头雾水，不知道具体是怎么变化的！

研究了一会才发现，CSS3的斜切坐标系和数学中的坐标系完全不一样（设置斜切原点为左上角）

<style>
div{
            width: 200px;
            height: 200px;
            transition:all 2s;
            margin: 150px auto;
        }
.div1{
        background-color: #f00;
    }
.div2{
        background-color: #0f0;
    }
</style>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

下面我们设置鼠标经过时的skew（0，30deg）属性

.div1:hover {
            transform:skew(0,30deg);
            transform-origin: left top;
        }

移入前

移入后

通过两幅图可以看出，skew（0，30deg）；是按照水平方向Y轴，顺时针旋转　　

下面我们设置鼠标经过时的skew（30deg，0）属性

.div2:hover {
            transform:skew(30deg,0);
            transform-origin: left top;

        }

移入前

移入后

通过两幅图可以看出，skew（30deg，0）；是按照垂直方向X轴，逆时针旋转

时间： 2024-08-29 08:52:18

CSS3中的skew（）属性的相关文章

css3中的部分属性

1.阴影box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 注意:inset(内阴影) 可以写在参数的第一个或最后一个,其它位置是无效的实例正值表示在对象的底部,负值表示在对象的顶部. .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px blue,4px 4px 6px red inset; } .boxshadow-inset{ width:100p

css3中的animation属性

作用:通过给元素添加animation属性,可以赋予该元素动画效果. <!DOCTYPE html><html> <head> <style> div{width:100px;height:100px;background:red;animation:my 5s;} @keyframes my { 0%{background:red;width:100px;}

简单粗暴的解释css3中的transform属性

事先说明,本文范畴尚限制在2D的transform中. 对于css3的transform属性,真是爱不释手,有了这个特性,各种特效轻松搞定.引用一句歌词"旋转,跳跃,我不停歇".transform就是这么时尚,就是这么任性.当然他任性的地方不只是在功能方面,还有在使用方面.我们看一下W3C官网中关于transform 2D的使用介绍. 看着有点多,首先先来分类一下:一个matrix,三个translate,三个scale,三个skew,一个rotate.而三个translate中又分为

CSS3中的一些属性

1.可匹配部分字符串 1 /*^运算符,匹配字符串首部*/ 2 a[href^='http://website'] 3 /*$运算符,匹配字符串尾部*/ 4 a[href$='.png'] 5 /* *运算符匹配任意位置的子字符串*/ 6 a[href*='google'] 2. box-sizing属性可使用box-sizing属性选择盒子模型:border-box; content-box(默认); padding-box CSS3背景提供了两个新属性:background-clip

CSS3中的Transition属性详解(贝赛尔曲线)

transition语法: 1 transition : [<'transition-property'> || <'transition-duration'> || 2 <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || 3 <'transition-duration'> || <'transition-ti

CSS3中的transition属性详解

一.语法 transition: property duration timing-function delay transition属性是个复合属性,她包括以下几个子属性: transition-property :规定设置过渡效果的css属性名称 transition-duration :规定完成过渡效果需要多少秒或毫秒 transition-timing-function :指定过渡函数,规定速度效果的速度曲线 transition-delay :指定开始出现的延迟时间默认值分别为:al

CSS3 中的 box-sizing属性

语法: box-sizing: content-text | border-box | inherit; content-box(默认): 宽度和高度分别应用元素的内容框:在宽度和高度之外绘制元素的内边距和边框. border-box: 为元素设定的宽度和高度决定了元素的边框盒:就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制:通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度. inherit: 规定从父元素继承box-sizing属性的值. 示例: c

css3中的box-sizing属性的使用

box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值:content-box.border-box.inherit. 其中inherit表示box-sizing的值应该从父元素继承. content-box和border-box的主要区别就是元素的width和height的值包不包括border.padding这两个属性的值. 一.content-box content-box也叫标准盒子模型,是默认值. 它的width组成仅仅只有content

CSS3中的动画，animation、transition和transform属性的运用

CSS3中使用animation属性,可以不适用JavaScript而制作动画,运用的好,可以做到很多漂亮的效果,最近有空,来摸索一下animation的使用,做几个demo玩玩 animation属性的介绍 animation属性能够改变元素的位置和各种css属性 animation 属性是一个简写属性,用于设置六个动画属性: animation-name 需要绑定到选择器的keyframe的名称(由@keyframe自定义在下边) animation-duration 规定完成动画花费的时间