笔记：

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. Pyhon信息采集 - 喜马拉雅专辑歌曲

    目录 Pyhon信息采集 - 喜马拉雅专辑歌曲 Pyhon信息采集 - 喜马拉雅专辑歌曲 setting.py # 喜马拉雅URL XMLY_URL = "https://www.ximal ...

  2. LINUX应用开发(面试)

    LINUX应用开发工程师职位 本试卷从考试酷examcoo网站导出,文件格式为mht,请用WORD/WPS打开,并另存为doc/docx格式后再使用 说明:应用开发可考察的点非常多,关键的还是C语言和 ...

  3. 【郑轻邀请赛 F】 Tmk吃汤饭

    [题目链接]:https://acm.zzuli.edu.cn/zzuliacm/problem.php?id=2132 [题意] [题解] 很容易想到用队列来模拟; 这个队列维护的是正在煮的4个人煮 ...

  4. 从零搭建流媒体服务器+obs推流直播

    背景介绍 本文使用的流媒体服务器的搭建是基于rtmp(Real Time Message Protocol)协议的,rtmp协议是应用层的协议,要依靠底层的传输层协议,比如tcp协议来保证信息传输的可 ...

  5. 实现MVC.NET 5的国际化

    实现国际化有三种做法: 创建资源文件. 每种语言设置一套单独的View. 1 + 2. 通常而言,第一种方法的可维护性是最高的.因为随着项目的规模的扩大,为每种语言设置一套单独的View,前期的工作量 ...

  6. Java对二叉搜索树进行插入、查找、遍历、最大值和最小值的操作

    1.首先,须要一个节点对象的类.这些对象包括数据.数据代表存储的内容,并且还有指向节点的两个子节点的引用 class Node { public int iData; public double dD ...

  7. 使用Pods和自定义静态库实现多工程联编

    使用Pods和自定义静态库实现多工程联编 字数607 阅读112 评论0 喜欢0 近来随着公司项目开发的深入,项目的规范也就越来越高了,为了更加方便的管理自定义静态库与pods之间的联系,好好的研究了 ...

  8. NoSQL数据库：Redis内存使用优化与存储

    Redis常用数据类型 Redis最为常用的数据类型主要有以下五种: ●String ●Hash ●List ●Set ●Sorted set 在具体描述这几种数据类型之前,我们先通过一张图了解下Re ...

  9. Lucene 4.0 TieredMergePolicy

    默认的merge policy. findMerges: 先将全部段依照扣除删除文档之后的字节数(bytesize * (1.0 - delRatio))降序排,对当中size() > 2.5G ...

  10. 用Arduino+OSC建立一个iPad铁路王国巡视机

    翻译自:http://blog.mydream.com.hk/howto/build-up-a-ipad-plarail-patrol-with-arduino-osc 简单介绍 这个教程告诉你怎样建 ...