CSS3 -webkit-transform(元素变换)

CSS3 -webkit-transform(元素变换)

-webkit-transform:none | 类型

类型:scale:缩放,1为原始大小。scale(x)。正数放大,负数缩小。属性值为一个时,x/y轴同时缩放;属性值为两个值时,分别控制x、y轴的缩放。

rotate:水平旋转,属性值格式为Xdeg。(deg是“度”的意思)rotate(Xdeg)。X为正数时,顺时针旋转;为负数时,逆时针旋转

translate:平移,基于XY轴重新定位元素。translate(Xpx,Ypx)。属性值为一个时,x、y轴参数相同;为两个时,x、y轴分别定位

skew:将元素沿水平方向倾斜变形。skew(Xdeg,Ydeg)。这个比较难表述,想象一下平行四边形吧。属性值为一个时,x、y轴参数相同;为两个时,x、y轴各自倾斜

matrix:矩阵

示例:

  

.body{
    margin-top: 3%;
    -webkit-transform: scale(0.8,0.3);  /*设置放大缩小*/
}

原文地址:https://www.cnblogs.com/wt11/p/8147029.html

时间: 2024-10-05 05:49:52

CSS3 -webkit-transform(元素变换)的相关文章

好吧,CSS3 3D transform变换,不过如此!

一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了~~ 看看下图女帝的动作以及神情,就可以知道名字带D的家伙的厉害! 最近折腾iPad的一些东西,有一些3D效果的交互.有些事情,总以为是遥远的未来,谁知真正发生的时候说来就来,比如说一颗想结婚的心,又比方说在实际项目中折腾3D transform效果. 然而,虽然以前折腾过3D变换效果(webkit

CSS3 3D transform变换

主要是看了这位大佬的文章,http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/,有的很大的收获,在上一个制作3D变形案例中明白了一些原理. 首先一个立体坐标系: 按照我的理解: 1.认识的突破口:rotateX, rotateY, rotateZ 3D transform中有下面这三个方法: rotateX( angle ) rotateY( angle ) ro

css3动画transform在ie内核动画结束后子元素a标签不能点击(本人未解决,求大神带飞)

问题描述: css3的动画 animation属性,如果动画里面需要动画的元素是transform,那么动画的这个元素的子元素a标签就不能 点击跳转,也不能运行点击事件,就好像个a标签被透明的东西挡住了一样,目前只是发现这个问题在ie内核的浏览器上面,比如 360浏览器,ie11(考虑到测试css3动画的,没有测试ie789 10.).而在火狐,谷歌正常. 百度了一大堆,都没有找到好的解决办法,比较接近的一个说法是,transform属性改变了元素的层级,也就是z-index属性,不过在这里a标

利用CSS3的transform属性让元素在页面居中

今天学到让元素在页面中水平居中的新写法,利用了CSS3的transform属性,通过设置translate的值来改变元素的位置. 1.先来看看怎么实现的 页面中放一个div,width和height随便设置大小和背景色,以便查看效果: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>利用CSS3的

CSS3中Transform

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

CSS3 3D transform

3D transform中有下面这三个方法: rotateX( angle ) rotateY( angle ) rotateZ( angle ) 邹凯的体操单杠运动是rotateX: 蔡依林姐姐的钢管舞是rotateY: 旋转飞刀的特技表演是rotateZ: 2.perspective属性,透视点,CSS3 3D transform的透视点是在浏览器的前方! 比方说,一个1680像素宽的显示器中有张美女图片,应用了3D transform,同时,该元素或该元素父辈元素设置的perspectiv

CSS3 2D Transform

在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和宽度,还有深度.我们将首先讨论元素在2D平面如何变换,然后我们在进入3D变换的讨论. CSS3 2D变换让Web设计师有了更多的自由来装饰和变形HTML组件.同时让设计师有更多的功能装饰文本和更多动画选项来装饰Div元素.在CSS3 2D变形中主要包含的一些基本功能如下. 位移translate()

css3 - 3D transform 变化

3d 视图效果,x/y/z轴的说明图 1 rotateX( angle ) 2 rotateY( angle ) 3 rotateZ( angle ) 4 rotate旋转的意思,rotateX旋转X轴,rotateY旋转Y轴,rotateZ旋转Z轴 rotateX.rotateY.rotateZ.rotate3d 旋转的效果说明图 必不可少的 perspective 属性 1 perspective的中文意思是:透视,视角! 2 perspective属性的存在与否决定了你所看到的是2次元的还

css3 过渡和2d变换——回顾

1.transition 语法:transition: property duration timing-function delay; transition-property 设置过渡效果的css 属性名称 语法: transition-property: none | all | property none 没有属性会获得过度效果 all 所有属性都将获得过度效果. property 定义应用过度效果css 属性名称列表,列表以逗号分割. indent 元素属性名称 transition-d