css3中transform的用法

transform:rotate旋转deg

#box1{
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);

}
transform:skew倾斜
#box2{
-moz-transform:skew(20deg);
-webkit-transform:skew(20deg);

}
transform:scale()放大
#box3{
-moz-transform:scale(2.0);
-webkit-transform:scale(2.0);

}
transform:translate位置偏移
#box4{
-moz-transform:translate(100px,100px);
-webkit-transform:translate(100px,100px);

}

实例:
li img:hover
{
-webkit-transform:scale(1.05);
-moz-transform:scale(1.05);
-ms-transform:scale(1.05);
-o-transform:scale(1.05);
transform:scale(1.05)
}

时间: 2024-11-06 13:19:01

css3中transform的用法的相关文章

CSS3中Transform

Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一起来看看CSS3中transform的旋转rotate.扭曲skew.缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧. 语法: transform : none | [ ]* 也就是: transform: rotate | scale | ske

CSS3中transform几个属性值的注意点

transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文章 CSS3 Transform. 与transition配合使用的方法参考CSS动画 animation与transition 本文记录几个注意点: 1.transform:rotate(30deg),2D旋转,正值为顺时针旋转,负值为逆时针旋转,默认旋转基点是中心点,也可以通过transform

自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div{ width: 200px; height: 100px; background: pink; border: 1px solid #ccc; margin-bottom: 10px; } .box1{ transform: translate(20px, 1

CSS3中transform,transition和animation的简介和用法示例

transform是一个属性,本质跟width,height是一样的,加上transform也就是为类增加一个变换属性. transition是一个属性,它是用来控制过渡效果的,因为用transform可以增加变换效果,而那个变换是瞬间突变,如果想让这个变化是平滑的.过渡型的,则要用transition来控制,设定要控制的属性和过渡的时间即可. animation是动画效果,要先用@keyframes定义一个动画过程,然后在类中用animation的各个参数制定想要添加的动画名称,运行时间,运行

css3中webkit-box的用法(平分父元素)

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.目前box-flex属性还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome/safari(-webkit-).一.box-flex属性box-flex主要让子容器针对父容器的宽度按一定规则进行划分 ht

CSS3中box-shadow的用法介绍

一般我们通过box-shadow来设置盒阴影,但是有些属性我们一般没有用到,这篇文章将对box-shadow属性进行逐个分析.语法 CSS Code复制内容到剪贴板 E {box-shadow:inset x-offset y-offset blur-radius spread-radius color} 即: 对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色} inset 投影方式    此参数是一个可选值,如果不设值,其默认的投影方式

css3中webkit-box的用法

webkit-box 1.之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局.至少width要自己去算百分比.2.flexible box 就可以实现真正意义上的流体布局.只要给出相应属性,浏览器会帮我们做额外的计算. 提供的关于盒模型的几个属性: box-orient           子元素排列 vertical or horizontalbox-flex             兄弟元素之间比例,仅作一个系数box-

css3中的变形(transform)、过渡(transtion)、动画(animation)

Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一起来看看CSS3中transform的旋转rotate.扭曲skew.缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧.是构成transtion和animation的基础. 语法: transform : none | <transform-func

CSS3中动画属性transform、transition和animation

Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能外,还提供了对动画的支持,可以用来实现旋转.缩放.平移.扭曲和过渡效果等等,这些功能再一次证明了CSS3功能的强大和无限潜能. CSS3实现元素变形的基础来源于新增的transform属性,该属性可用于实现元素的旋转.缩放.平移.扭曲等效果.目前webkit内核支持-webkit-transform