笔记：

2D变换

　　transform

　　　　位移

 　　　　 translateX() translateY() 

　简写：translate(X值，Y值)  正值向右，负值向左

旋转 rotate()

　　　　 rotate(？deg)  括号中为角度值   正值是顺时针旋转，负值是逆时针旋转

　　

缩放 scale()

　　 scale() 括号中为数值，可以为浮点数     如大于1是放大效果，小于1是缩小效果

变形（斜切）

　　 skewX() skewY()

　　　　简写：skew(X轴斜切角度，Y轴斜切角度)

body:hover div{

　　　　　　　　transform:translate(100px,100px) rotate(30deg) scale(1.5) skew(40deg,40deg)

　　　　　　　　}

　　　　解析顺序：根据transform内写的顺序进行解析。

变换原点：

　　　　 transform-orign:

　　　　　　　　　　 left right top bottom

　　　　center（默认） 当设置相应的值后，会按照相应设置的值发生变换。

3D变换

3D效果：首先给需要进行3D变换元素的父级添加3D环境和景深。

写法：

transform-style:preserve-3d;    <!--添加3D环境-->
perspective:数值; 如：300px;   <!--景深--> 数值较低的话无效果

transform

rotateX     沿X轴旋转：正值向右翻转，负值向左翻转

rotateY     沿y轴旋转：正值向右翻转，负值向左翻转

rotateZ     沿z轴旋转：正值向屏幕外，负值向屏幕内

translateX 沿X轴位移：正值向右，负值向左

translateY 沿y轴位移：正值向下，负值向上

translateZ 沿z轴位移：正值向屏幕外，负值向屏幕内

实例代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>3D正方形实例</title>

         <style type="text/css">

             #box{

                 width: 100px;

                 height: 100px;

                 padding: 100px;

                 margin: 100px auto;

                 perspective:300px;

             }

             #val{

                 width: 100px;

                 height: 100px;

                 position: relative;/*设置相对定位*/

                 transform-style: preserve-3d;/*给父级设置3D环境*/

                 transform-origin: center center -50px;/*沿中轴线转动*/

                 transition: 1s;/*响应时间1s*/

             }

             #val div{

                 position: absolute;/*设置绝对定位*/

                 width: 100px;

                 height: 100px;

                 background: blue;

                 text-align: center;

                 font: 40px/100px "微软雅黑";

             }

             #val div:nth-of-type(1){

                 background: yellow;

             }

             #val div:nth-of-type(2){

                 left:-100px;/*定位 沿X轴向左移动100px*/

                 background: red;

                 transform-origin: right;/*位移点为右边*/

                 transform:rotateY(-90deg);/*向Y轴翻转向左90度*/

             }

             #val div:nth-of-type(3){

                 top:-100px;/*定位 沿Y轴向上移动100px*/

                 background:pink;

                 transform-origin: bottom;/*位移点为下边*/

                 transform:rotateX(90deg);  /* 沿X轴向内翻转90度*/

             }

             #val div:nth-of-type(4){

                 left:100px;

                 background: #FF6600;

                 transform-origin: left;

                 transform:rotateY(90deg);

             }

             #val div:nth-of-type(5){

                 top:100px;

                 background: #1883BA;

                 transform-origin: top;

                 transform:rotateX(-90deg);

             }

             #val div:nth-of-type(6){

                 background: gray;

                 transform:translateZ(-100px) rotateX(-180deg);   /*翻转180度,不然数字6为镜像显示*/

             }

             #val:hover {

                 transform: rotateY(360deg) ;      /*鼠标停留,X轴旋转360度,Y轴旋转30度*/

             }

         </style>

     </head>

     <body>

         <div id="box">

             <div id="val">

                 <div>1</div>

                 <div>2</div>

                 <div>3</div>

                 <div>4</div>

                 <div>5</div>

                 <div>6</div>

             </div>

         </div>

     </body>

 </html>

实现效果：鼠标停留，立方体旋转。

CSS3 3D变换实例 滚动的正方体的更多相关文章

  1. CSS3 3D变换

    可以这么说,3D变换是基于三维坐标系的.以下是“盗用”的图 CSS3中的3D变换主要包括以下几个功能函数: 3D位移:包括translateZ()和translate3d(): 3D旋转:包括rota ...

  2. CSS3之3D变换实例详解

    CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...

  3. css3 3D变换和动画

    3D变换和动画 建立3D空间,transform-style: preserve-3d perspective: 100px; 景深 perspective-origin:center center ...

  4. css3 3d变换和动画——回顾

    1.transform-style 属性指定嵌套原始是怎样在三维空间中呈现. 语法:transform-style: flat | preserve-3d flat 表示所有子元素在2D平面呈现. p ...

  5. CSS3 3D轮播主要可以分成这样的三类

    中秋节假期这么快就没了,这几天还一直下雨,索性在家看看书.这次看的是Tom Lane的<A Tour of PostgreSQL Internals>.这篇小随笔就算做学习笔记了.园子里面 ...

  6. 好吧，CSS3 3D transform变换，不过如此！

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  7. 好吧，CSS3 3D transform变换，不过如此！——张鑫旭

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  8. IT兄弟连 HTML5教程 CSS3属性特效 3D变换3

    5  3D旋转 在三维变形中,我们可以让元素在任何轴旋转.为此,CSS3新增了三个旋转函数:rotateX().rotateY()和rotateZ().使用rotateX()函数允许一个元素围绕X轴旋 ...

  9. IT兄弟连 HTML5教程 CSS3属性特效 3D变换1

    3D变换较2D变换多了一下的转换属性,3D转换属性及描述如表1: 表1  3D转换属性 3D的转换方法如表2: 表2  3D转换方法     1  transform-style transform- ...

随机推荐

  1. 爬虫文件存储-1：mysql

    1.连接并创建数据库 import pymysql db = pymysql.connect(host='localhost', user='root', password='root', port= ...

  2. 发现：Click事件也能获取鼠标单击的坐标

    按照MSDN的说明以及平时的习惯,我们要获取鼠标单击时的相对坐标,都会使用MouseClick等事件,今天,偶然发现,原来Click事件也可以. /* 惊天地泣鬼神的考古业绩. * 原来Cilck事件 ...

  3. 一个电商项目的Web服务化改造3：改进方案の规范和约定、单表、单一职责

         最近一直在做一个电商项目,需要把原有单系统架构的项目,改造成基于服务的架构,SOA.      有点挑战,做完了,会有很大进步. 上一篇,我们描述了原有项目中的问题.  或者说是,本篇的基本 ...

  4. scrapy——3 crawlSpider——爱问

    scrapy——3  crawlSpider crawlSpider 爬取一般网站常用的爬虫类.其定义了一些规则(rule)来提供跟进link的方便的机制. 也许该spider并不是完全适合您的特定网 ...

  5. 【codeforces 510A】Fox And Snake

    [题目链接]:http://codeforces.com/contest/510/problem/A [题意] 让你画一条蛇.. [题解] 煞笔提 [Number Of WA] 0 [完整代码] #i ...

  6. noip模拟赛 计数

    [问题描述] 给出m个数a[1],a[2],…,a[m] 求1~n中有多少数不是a[1],a[2],…,a[m]的倍数. [输入] 输入文件名为count.in. 第一行,包含两个整数:n,m 第二行 ...

  7. 关于在JSP页面中为什么一定要用${pageContext.request.contextPath}来获取项目路径，而不能用${request.contextPath}?

    这里的疑问在于pageContext和request都是JSP中的内置对象之一,为什么不直接用${request.contextPath}来获取项目路径? 出现这种疑问,其实是将JSP的内置对象和EL ...

  8. [bzoj1103][POI2007]大都市meg_dfs序_树状数组

    大都市meg bzoj-1103 POI-2007 题目大意:给定一颗n个点的树,m次操作.将一条路的边权更改成0:查询一个点到根节点的点权和.开始的时候所有边的边权都是1. 注释:$1\le n,m ...

  9. [bzoj3702/2212][Poi2011]二叉树/Tree Rotations_线段树

    二叉树 Tree Rotations bzoj-3702 bzoj-2212 Poi-2011 题目大意:现在有一棵二叉树,所有非叶子节点都有两个孩子.在每个叶子节点上有一个权值(有n个叶子节点,满足 ...

  10. JDBC数据源(DataSource)数据源技术是Java操作数据库的一个很关键技术，流行的持久化框架都离不开数据源的应用。

    JDBC数据源(DataSource)的简单实现   数据源技术是Java操作数据库的一个很关键技术,流行的持久化框架都离不开数据源的应用. 2.数据源提供了一种简单获取数据库连接的方式,并能在内部通 ...