笔记：

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. C++ API实现创建桌面快捷方式

    #include<windows.h> #include <string> #include <shellapi.h> #include <shlobj.h& ...

  2. MySQL中的分页操作结合python

    mysql中的分页操作结合python --分页: --方式1: ;-- 读取十行 , --从第十行读取 往后再读十行 --方式2: offset ; --从第二十行开始读取10行 -- 结合pyth ...

  3. array_map 等php回调函数使用问题(关联数组下标获取)

    前言:我自己用此类回调函数,来替代 foreach 纯粹是用为代码的简洁性,让代码更好看.(我有点代码小洁癖~) 1.array_reduce 当迭代处理一个一维索引数组时,在回调函数内是无法获取到当 ...

  4. Django - Form和ModelForm

    [TOC] 一. form介绍 1.生成页面可用的HTML标签 2. 提供input可以提交数据 3. 对用户提交的数据进行校验 4. 保留上次输入内容 5. 提供错误信息 二. 普通方式书写注册功能 ...

  5. Linux 系统基础优化和常用命令

    目录 Linux 系统基础优化和常用命令 软连接 tar解压命令 gzip命令 netstart命令 ps命令 kill命令 killall命令 SELinux功能 iptables防火墙 Linux ...

  6. 【[Offer收割]编程练习赛13 B】最大子矩阵(别人的思路)

    [题目链接]:http://hihocoder.com/problemset/problem/1502 [题意] [题解] 枚举矩形的最上面的行数和最下面的行数(i,j且i<=j); 然后一个变 ...

  7. everyday two problems / 3.11 - 3.17

    7日共14题,因为3.14两题相同,所以实际总共13题 13道题分为难易两部分,没有按照时间顺序排列题目 A.易: 1.覆盖数字的数量 题意: 给出一段从A - B的区间S(A,B为整数) 这段区间内 ...

  8. Solr插件的弊端

    在前文<Solr Update插件自定义条件索引>中,我介绍了如何通过插件的模式,自定义Solr的Update过程.但是在大半年的使用过程中,发现这种方式存在如下弊端. 1.环境难以维护. ...

  9. mongodb之配置

    前言 最新版本支持yaml格式的配置文件,只支持空格,不能使用tab 详细配置说明 #系统日志配置 systemLog: destination: file path: /var/log/mongod ...

  10. 机器学习1k近邻

    自己一直学习计算机视觉方面的东西,现在想学习一下数据挖掘跟搜索引擎,自己基础也有点薄弱,看朱明的那本数据挖掘,只能片面的了解这个数据挖掘.不过最近有一本书 机器学习实战,于是乎通过实战的形式了解一下基 ...