CSS3动画特效——transform详解

CSS3动画特效——transform详解

公共css

.common{
    width:100px;
    height:100px;
    margin:20px auto;
    background-color:#75C934;
    text-align:center;
    line-height:100px;
    font-size:18px;
}

1)transform:rotate(value); 元素旋转 value为旋转度数

默认顺时针旋转。

value若为负值则逆时针旋转。

        .box{

             /*过渡效果*/
            -webkit-transition: transform 0.8s;
        }
        .box:hover{
            /*旋转80°*/
            transform:rotate(80deg);
        }

2)transform:skew(value);元素倾斜

value(值)为倾斜度数,例:30deg。

value只有一个值,横向默认向左倾斜;有两个值,第二个值纵向默认向上倾斜。

value若为负值则反方向倾斜。

        .box{
            /*过渡效果*/
            -webkit-transition: transform 0.8s,border-radius 0.8s;
            border-radius:30px;
        }
        .box:hover{
            transform:skew(20deg,20deg);
            border-radius:0px;
        }

3)transform:scale();元素缩放

value(值)为缩放倍数,例:2。

value只有一个值,默认整体缩放;有两个值,第一个值横向缩放,第二个值纵向缩放。

value值大于1放大,小于1大于0缩小,负值则反向缩放(元素呈镜像)

        .box{
            -webkit-transition: transform 0.8s,border-radius 0.8s;
        }
        .box:hover{
            transform:scale(2,0.8);
            border-radius:40px;
        }

22222

        .box{
            -webkit-transition: transform 0.8s,border-radius 0.8s;
        }
        .box:hover{
            transform:scale(2,-0.8);
            border-radius:40px;
        }

图片缩放效果

.scale{
    width:234px;
    height:120px;
    overflow: hidden;
    transform:rotate(0deg);
}
.scale img:hover{
        transform:scale(1.2,1.2);
        transition: 1s
}

4)transform:translate();元素位移

value(值)为位移像素,例:5px。

value只有一个值,横向默认向右移动;有两个值,第二个值纵向默认向下移动。

value若为负值则反方向移动。

        .box{
            -webkit-transition: transform 0.3s,box-shadow 0.3s;
        }
        .box:hover{
            transform:translate(-3px,-3px);
            box-shadow:3px 3px 5px 0px #000;
        }

前置属性:

transform-origin

transform-style

perspective

perspective-origin

backface-visibility

2D变形:

translate

scale

rotate

skew

matrix

3D变形:

translate3d

scale3d

rotate3d

matrix3d

原文地址:https://www.cnblogs.com/lichihua/p/10807088.html

时间: 2024-10-03 13:28:15

CSS3动画特效——transform详解的相关文章

css3系列之transform 详解skew

skew skewx skewy skewX()  倾斜该元素,里面填的是角度,下面↓ 你会看到,随着元素被倾斜,高度居然不变.聪明的你,一定会知道,高度不变,代表了,Y轴被拉伸了. 跟scale 同理,改变的是 轴的刻度. → scale skew 也就是 skewx  和 skewy 的结合,  skew(45deg, 45deg); 原文地址:https://www.cnblogs.com/yanggeng/p/11278028.html

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45deg); 共一个参数"角度",单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度. 二.缩放 scale 用法:transform

【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)

[二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的形状,当然也不会使用任何图片哦.那就没意思了. 有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我也非常赞同,但我的理由还是,那就没意思了. 这次写的详细一点,把各个部位都拆出来分析. 第一步:头部轮廓 <header></header> .ultraman header

css3动画特效:上下晃动的div

css3动画特效:上下晃动的div <div id="square" class="container animated">上下晃动</div> /** * transform-origin 设置旋转元素的基点位置 * animation-name 设置动画名称 * animation-duration 设置动画时间 * animation-fill-mode 设置播放后的状态 * animation-iteration-count 设置循环

Unity之粒子特效参数详解——上

如需转载请保留本文链接. Unity版本号:5.5.0 参考书籍:<Unity5.x从入门到精通> 参考资料:Unity官方API 参考文章: 1.http://jingyan.baidu.com/article/380abd0a77c5041d90192c19.html 2.http://www.cnblogs.com/qinghuaideren/p/3597666.html?utm_source=tuicool&utm_medium=referral 目标:做出一个篝火效果,最终结

CSS3的@keyframes用法详解:

CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes翻译成中文,是"关键帧"的意思,如果用过flash应该对这个比较好理解,当然不会flash也没有任何问题.使用transition属性也能够实现过渡动画效果,但是略显粗糙,因为不能够更为精细的控制动画过程,比如只能够在指定的时间段内总体控制某一属性的过渡,而animation属性则可以利用

css3动画特效集合

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <!--<link rel="stylesheet" type="text/css" href="animation.css">--> <style type="text/cs

玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

1.博客背景 在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史 伪元素实际上在CSS1(CSS1

CSS3中REM使用详解

在页面中设置字体,我们知道有常见的两种,px 和 em. px 在Web页面制作中,我们一般使用"px"来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小(虽然一般人不会去改变浏览器字体大小),这时会使用我们的Web页面布局被打破,这时就提出了使用"em"来定义Web页面的字体. em 一般都是body的font-size为基准常用写法: 01 02 03 04 05 06 07 0