笔记：

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. CentOS6.8 安装python2.7，pip以及yum

    由于CentOS6.8里自带的yum所依赖的python是2.6.66版本,但是安装pip至少要求python是2.7版本,因而原有的2.6并不能卸载,又得安装新的2.7.之前安装的时候强制卸载了2. ...

  2. vue项目中的常见问题（vue-cli版本3.0.0）

    一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader --save-dev 在使用时 在style标签中加入 lang="les ...

  3. Python-----基本操作

    Python是一种简单易学,且功能强大的编程语言.它是面向对象的编程语言. 对象的意义: 对象可以通过一个“.” 的方式来调用这个对象的方法. Python环境安装配置: Python是一种通用的计算 ...

  4. 腾讯云：ubuntu搭建 FTP 文件服务

    搭建 FTP 文件服务 安装并启动 FTP 服务 任务时间:5min ~ 10min 安装 VSFTPD 使用 apt-get 安装 vsftpd: sudo apt-get install vsft ...

  5. 【Mail.Ru Cup 2018 Round 2 A】 Metro

    [链接] 我是链接,点我呀:) [题意] [题解] 1:一直往右走的情况. 2:中间某个地方中转 (不会出现超过1次的转弯. (如果超过了和1次是等价的 [代码] #include <bits/ ...

  6. Maven学习总结（27）——Maven自定义打包插件maven-assembly-plugin详解

    Assembly插件会生成 "assemblies", 此特性等同于的Maven 1 distribution plug-in..该插件不仅支持创建二进制归档文件,也支持创建源码归 ...

  7. Android第三方开源下拉框：NiceSpinner

     Android第三方开源下拉框:NiceSpinner Android原生的下拉框Spinner基本上可以满足Android开发对于下拉选项的设计需求,但现在越来越流行的下拉框不满足于Andro ...

  8. 【ACM】nyoj_132_最长回文子串_201308151713

    最长回文子串 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 输入一个字符串,求出其中最长的回文子串.子串的含义是:在原串连续出现的字符串片段.回文的含义是:正着看和 ...

  9. C - 剪花布条

    一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢?  Input输入中含有一些数据,分别是成对出现的花布条和 ...

  10. Spring MVC-表单（Form）标签-列表框（Listbox）示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_listbox.htm 说明:示例基于Spring MVC 4.1.6. 以下示例 ...