CSS3 : transform 与 transform-origin 属性可以使元素样式发生转变

CSS3 : transform 用于元素样式的转变,比如使元素发生位移、角度变化、拉伸缩小、按指定角度歪斜

transform结合transition可实现各类动画效果

transform :

transform 兼容各浏览器写法如下:

1 transform:              /* 转变样式 */;
2 -ms-transform:          /* 转变样式 */;        /* IE 9 */
3 -webkit-transform:      /* 转变样式 */;        /* Safari and Chrome */
4 -o-transform:           /* 转变样式 */;        /* Opera */
5 -moz-transform:         /* 转变样式 */;        /* Firefox */

可转变样式如下:

1、使元素位置移动:translate,语法:translate(x坐标, y坐标)

1 transform: translate(50px,100px);
2 -ms-transform: translate(50px,100px);        /* IE 9 */
3 -webkit-transform: translate(50px,100px);    /* Safari and Chrome */
4 -o-transform: translate(50px,100px);        /* Opera */
5 -moz-transform: translate(50px,100px);        /* Firefox */

以上代码使元素位置横向移动50像素,纵向移动100像素

2、使元素按指定角度旋转多少度:rotate,语法: rotate(角度值deg)

1 transform: rotate(30deg);
2 -ms-transform: rotate(30deg);        /* IE 9 */
3 -webkit-transform: rotate(30deg);    /* Safari and Chrome */
4 -o-transform: rotate(30deg);        /* Opera */
5 -moz-transform: rotate(30deg);        /* Firefox */

以上代码使元素顺时针旋转30度,如果值是负值,则是逆时针旋转

3、使元素按指定的倍数拉伸或缩小,里面的字体也会同时拉伸或缩小:scale,语法:scale(X轴倍数, Y轴倍数)

1 transform: scale(2,4);
2 -ms-transform: scale(2,4);    /* IE 9 */
3 -webkit-transform: scale(2,4);    /* Safari 和 Chrome */
4 -o-transform: scale(2,4);    /* Opera */
5 -moz-transform: scale(2,4);    /* Firefox */

以上代码使元素的宽度拉伸2倍,高度拉伸4倍

4、使元素歪斜给定的角度:skew,语法:skew(x轴角度值deg,y轴角度值deg)

1 transform: skew(30deg,20deg);
2 -ms-transform: skew(30deg,20deg);    /* IE 9 */
3 -webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
4 -o-transform: skew(30deg,20deg);    /* Opera */
5 -moz-transform: skew(30deg,20deg);    /* Firefox */

transform-origin:

transform-origin用于设置旋转元素的基点位置,兼容语法:

1 transform-origin:    /* 位置设置 */;
2 -ms-transform-origin:  /* 位置设置 */;
3 -webkit-transform-origin:  /* 位置设置 */;
4 -moz-transform-origin:  /* 位置设置 */;
5 -o-transform-origin: /* 位置设置 */;

位置设置,分三处设置,语法:

1 transform-origin: x-axis y-axis z-axis;

x-axis : X轴线位置

y-axis :Y轴线位置

z-axis : Z轴线位置

位置可以是具体数值、百分比、left、right、center

数值示例:

1 transform-origin:0 100;

百分比示例:

1 transform-origin:20% 40%;

默认值设置:

1 transform-origin: left center;

原文地址:https://www.cnblogs.com/wm218/p/9246560.html

时间: 2024-10-31 05:32:19

CSS3 : transform 与 transform-origin 属性可以使元素样式发生转变的相关文章

HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结

<h1>HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结</h1> <h1>HTML5,animation,keyframe,transform,transition,2D translate,3D translate,CSS3</h1> CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CS

CSS3中和动画有关的属性transform、transition 和 animation

CSS3中和动画有关的属性有三个  transform. transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使…变形:转换 .这里我们就可以理解为变形.那都能怎么变呢? none 表示不进行变换: rotate 旋转            transform:rotate(20deg) 旋转角度可以为负数.需要先有transform-origin定义旋转的基点可为left top center righ

CSS3 转换2D transform

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

CSS3的变形transform、过渡transition、动画animation学习

学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.-ms-.-o-),本文为简化内容,直接使用了原版属性 根据不同属性的支持度,在实际使用的时候需要添加相应的浏览器前缀支持 目录: 变形transform 过渡transition 动画animation 一.变形transform 变形有rotate旋转.scale缩放.translate位移.sk

CSS3中的transform

CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. transform 在2D里主要是4个方法.除了rotate 其他都是接受x y值 translate skew rotate scale Translate:元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标)  transform: translate(100px, 50px); Skew:x,y有分别的方法. x 变化就是左右的倾斜 x 变化是 上下的倾斜 skewX(10deg) skewY(80

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{ /*过渡效果*/ -w

css3 三大王 transition , transform , animation

三大王  transition : 过渡     , transform : 变形  ,   animation : 动画 1.transform  变形 任何的变形都可以被过渡   , 一个transform写多个用空格隔开 ,分开写可能会被覆盖, 想要实现3d效果要给父元素添加景深 eg:  perspective:500px; perspective-origin <1> transform: rotate(90deg)  意思是顺时针'旋转' 90度   ,  deg是单位度    可

css3 动画 animation transform

<!DOCTYPE html><!-- saved from url=(0073)http://www.w2bc.com/demo/201504/2015-04-27-jquery-tecent-focus/index.html --><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <m

CSS3景深、三维变换属性及旋转三维立方体的实现

浏览器坐标系 在讲正式语法之前,首先需要了解浏览器坐标系 这需要我们把浏览器界面想象成一个立体的场景 这是网上流传很广的浏览器坐标系图片 从左到右的方向是浏览器x轴的正方向 从上到下的方向是浏览器y轴的正方向 而z轴正方向是面对于我们的 了解这个很重要,因为下面我们旋转元素需要借助它来理解 3D旋转 我们在平面中使用的旋转只是单纯的让元素在平面旋转一定角度 在三维旋转中稍微要复杂一下 属性当然还是用我们的transform 三维旋转有下面三个函数分别对应三个维度的旋转 rotateX(xxdeg