笔记：

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. ajax 禁用按钮防止重复提交

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. Array的内置方法思维导图整理（JavaScript）

    按照MDN整理的数组部分的思维导图,主要目的是方便查漏补缺,所以写的不是很详细.

  3. vue项目的路由配置

    方案一.在生成项目的时候就选择安装路由; 这个地方选择y即可; 生成项目之后在src目录下会有router文件夹,里面有index.js,并且里面已经存在一个helloWorld页面了,可以直接模仿着 ...

  4. 【http反向代理】多个域名指向同一个ip的不同网站解决方法

    一个服务器需要挂载多个项目[重点是都能通过域名访问] 实现原理: 1.当前市面上看到的一些服务器,开放的端口一般都要求为 '80' 端口 所以80端口成了商用端口 2.域名的绑定是绑定一个一般是绑定你 ...

  5. Linux - redis主从同步

    目录 Linux - redis主从同步 环境准备 配置主从同步 测试写入数据,主库写入数据,检查从库数据 手动进行主从复制故障切换 Linux - redis主从同步 原理: 从服务器向主服务器发送 ...

  6. Git：分支的创建、合并、管理和删除

    了解分支 如果想实现多人协作.划出Bug区.Feature区等功能,就需要分支功能.(确实很强大的地方) 每次commit时,Git都把它们串成一条时间线,这条时间线就是一个分支.截止到目前,只有一条 ...

  7. 【codeforces 767B】The Queue

    [题目链接]:http://codeforces.com/contest/767/problem/B [题意] 排队去办护照; 给你n个人何时来的信息; 然后问你应该何时去才能在队伍中等待的时间最短; ...

  8. linux给文件或文件夹加入apache权限

    系统环境:ubuntu11.10/apache2/php5.3.6 在LAMP环境中,測试一个简单的php文件上传功能时,发现/var/log/apache2/error.log中出现例如以下php警 ...

  9. volatile非原子性示例

    volatile非原子性示例 学习了:<Java多线程编程核心技术>高洪岩 著 Page124 package com.stono.thread2.page124_2; public cl ...

  10. [PWA] Show Notifications when a Service Worker is Installed or Updated

    Service Workers get installed and activated in the background, but until we reload the page they don ...