CSS3 transform属性 附上demo

参考http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

  • 用法
  • 实例

刚开始使用这个属性是因为工作的需要,制作H5动画页面,通过查具体用法也可以制作出各种小动画,比如平移,缩放,翻动,刚开始看到这些动画都很惊奇,居然短短写一小段东西就就可以完成js写一堆代码的动画了,然后看到别人家的CSS3动画,再次被教育做人了。

下面说说怎么使用

transform

定义 :transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

语法 : transform: none|transform-functions;

具体参考W3C : http://www.w3school.com.cn/cssref/pr_transform.asp

一般可以通过添加

-webkit-transform:matrix(n,n,n,n,n,n)

-o-webkit-transform:matrix(n,n,n,n,n,n)

-moz-webkit-transform:matrix(n,n,n,n,n,n)

这类前缀可以解决部分低版本浏览器兼容问题

在这些属性中transform:perspective(n)这个属性在3D变换中是比较重要的

perspective

定义和用法 : perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。

注释:perspective 属性只影响 3D 转换元素。

视距 我理解的就是 你的眼睛在屏幕上方,定义perspective的元素距离屏幕的距离就是 视距

translateZ

当定义好perspective的时候,通过使用translateZ可以更好的把握。通过定义translateZ(n px) 的值 观察元素距离你视觉焦点的远近

通过改变translateZ的值,改变该元素与你的距离,translateZ大与你的距离越近,看到的越大

当translateZ>perspective时,元素看不到 因为你已经越过 该元素 了

transform-style

定义和用法 : transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

注释:该属性必须与 transform 属性一同使用。

设置transform-style:preserve-3d属性,可以使元素有3D的显示效果

Demo

通过参考,回旋木马的例子,本实例在此基础上写一个立体的回旋立方体。

    
 <div id=‘group1‘>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>

通过设置每个p的rotate形成立方体,然后计算好立方体的长宽高 通过translateZ确定立方体形状

 #groups1{
                position:relative;
                transform-style:preserve-3d;
                width:100%;
                height:300px;
                margin-top:100px;
                transition:transform 1s;
            }
        p:nth-child(1){
            transform:rotateY(0deg) translateZ(150px);
        }
        p:nth-child(2){
            transform:rotateY(90deg) translateZ(150px);
        }
        p:nth-child(3){
            transform:rotateY(180deg) translateZ(150px);
        }
        p:nth-child(4){
            transform:rotateY(270deg) translateZ(150px);
        }
        p:nth-child(5){
            transform:rotateX(90deg) translateZ(150px);
        }
        p:nth-child(6){
            transform:rotateX(270deg) translateZ(150px);
        }

通过js改变元素的Rotate的值,再通过定时 每隔1s改变一次 ,使立方体转起来

var transRotateX=function(){
                var degNum=_randomNum()*deg,
                    rota=parseInt(rotateX)+parseInt(degNum);

                ele.style.transform=‘rotateX(‘+rota+‘deg)‘;
                rotateX=_validate(ele.style.transform);
                countX++;
            },
                transRotateY=function(){
                var degNum=_randomNum()*deg,
                    rota=parseInt(rotateY)+parseInt(degNum);

                ele.style.transform=‘rotateY(‘+rota+‘deg)‘;
                rotateY=_validate(ele.style.transform);
                countY++;
            },

由于最近刚开始学习git的用法,以及js的各种写法,模块化之类,所以代码可能写的不够简洁优雅,不过通过一次一次练习,总会好的嘛~

附上代码GitHub地址:https://github.com/xshaobaozi/transform3D

时间: 05-13

CSS3 transform属性 附上demo的相关文章

如何使用 css3 transform 属性来变换背景图?

本文和大家分享的主要是使用 css3 transform 属性来变换背景图相关内容,一起来看看吧,希望对大家学习css3有所帮助. 使用 css3 transform 属性可以轻易的旋转,倾斜,缩放任何元素.目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用 . 如果你要在黑莓浏览器或者 UC 浏览器使用这个属性, 你需要加 -webkit- 前缀. #myelement { -webkit-transform: rotate(30deg); transform: rotate(30deg)

CSS3 Transform属性详解

今天我们一起来学习有关于CSS3制作动画的几个属性:变形(transform).转换(transition)和动画(animation)等更高级的CSS3技术.本文主要介绍的是这三个属性之中的第一个──变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一起来看看CSS3中transform的旋转rotate.扭曲skew.缩

CSS3 transform 属性

div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ } 该属性允许我们对元素进行旋转.缩放.移动或倾斜. CSS3 transform是什么?

【CSS3 transform属性和过渡属性详解】

CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 2D Transform 方法 translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. rotate() 在一个给定度数顺时针旋转的元素.负值是允许的,这样是元素逆时针旋转. scale() 该元素增加或减少的大小,取决于宽度(X轴)和

CSS3 transform属性

在介绍有关transform相关的知识之前,先来讲一下transform-origin的用法以及关于<angle>角度的几种取值单位.另外,在使用时,为了兼容各个浏览器,可加上浏览器的私有前缀[-moz- -webkit -ms-]. transform-origin 设置对象变换的原点,通常和rotate旋转.scale缩放.skew斜切等一起使用,IE9+ 2D情况下:默认值 50% 50%,即center center 3D情况下:默认值 50% 50% 0 取值介绍: X轴:left|

认识CSS3 transform 属性

定义和属性 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 注:opela不支持3D转换    IE9以上浏览器支持支持 translate3d(x,y,z)  3d平移变化       x y  z  是指平移的像素 rotate3d(x,y,z,angle)    3d 旋转    X Y Z取值是在0-1之间  angle=45deg  实际旋转的角度 scale3d(x,y,z,) 3d缩放     x y z取值也是0-1之间

css3 transform属性多值的顺序问题

对于transform属性的多值的顺序问题,我自己就被困扰过.后来知道了跟顺序有关,但是不知道为什么.我想应该很多人跟我以前一样,知其然不知其所以然.如果不知道的,也许这篇文章会对大家有所帮助. 先来看一个例子. html代码: <div id="red1"></div> <div id="red2"></div> css代码: body { margin: 0; } div { width:100px; height

CSS3 transform 属性详解(skew, rotate, translate, scale)

写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有必要写个博文,帮助那些不懂的人,让他们看了此文就懂. 进入正题: 先说明下,电脑屏幕的XY轴跟我们平时所说的直角坐标系是不一样的.如下图: 图上的盒子就是代表我们的电脑屏幕,原点就是屏幕的左上角,竖直向下为X轴正方向,水平向右为Y轴正方向. 1.倾斜skew 先看图 每个图下方都有skew的参数.粗的红色的线

CSS3 transform 属性 旋转 div 元素

div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ } 下面为实例 <!DOCTYPE html PUBLIC "-//W3C//DTD