CSS3-3D技术

transform翻译成汉语具有"变换"或者"改变"的意思。

此属性具有非常强大的功能,比如可以实现元素的位移、拉伸或者旋转等效果,

最能体现transform 属性强大实力的是实现元素的3D变换效果。

transform  功能函数:

1、位移translate

transform: translate(x , y)    2d

transform:translateX();

transform:translateY();

transform:translateZ(不能写百分比,只能写具体的数值);   3d

transform: translate3d(x , y , z);  3d

2、旋转rotate

transform: rotate();   2d

transform: rotateX();

transform: rotateY();

transform: rotateZ();  3d

transform: rotate3d(x,y,z,a);      3d

0 :不旋转;1:旋转 ;

x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;

y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;

z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;

a:是一个角度值,主要用来指定元素旋转的角度,正值顺时针旋转,负值逆时针旋转。

3、缩放scale

transform: scale3d(x , y , z);  3d

transform: scale(x,y)        2d

transform: scaleX();

transform: scaleY();

transform: scaleZ();    3d

4、设置空间transform-style

transform-style:flat;处在2D空间里   (默认值)

transform-style:preserve-3d;处在3D空间里

5、景深perspective

perspective:200px; (父元素)

transform:perspective(1200px) (在子元素中使用)

离屏幕多远的距离去观察元素,两个都设置会发生冲突,建议只设置父元素,通常的数值在900-1200之间,当视线距离物体足够远的时候,基本上就不会有近大远小的感觉。

6、原点persnpective-origin

persnpective-origin:值1  值2;(父元素)

原点设置,基点位置,观察3d元素的(位置)角度。

值可以是px    %    left   top  right   bottom。

7、旋转元素的基点位置transform-origin

transform-origin:x y z; 设置旋转元素的基点位置,z 不能设置%;

transform-origin :50% 50% 0;(默认值)

CSS3-3D技术的更多相关文章

  1. 手把手教你玩转 CSS3 3D 技术

    css3的3d起步 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上的2D事物,从而展现3 ...

  2. 手把手教你玩转CSS3 3D技术

    手把手教你玩转 CSS3 3D 技术   要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上 ...

  3. 【CSS】330- 手把手教你玩转 CSS3 3D 技术

    点击上方"前端自习课"关注,学习起来~ CSS3的3D起步 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(transla ...

  4. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

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

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

  6. CSS3 3D Transform

    CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...

  7. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

  8. css3 3D旋转效果

    css3 record2 css3 3D旋转效果 需理解transform css3知识: keyframes transform perspective jsfiddle demo keyframe ...

  9. 基于HT for Web 3D技术快速搭建设备面板

    以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟 ...

  10. [应用][js+css3]3D盒子导航[PC端]

    CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网 ...

随机推荐

  1. 吴裕雄--天生自然HTML学习笔记:HTML 属性

    属性是 HTML 元素提供的附加信息. HTML 属性 HTML 元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签 属性总是以名称/值对的形式出现,比如:name="v ...

  2. 修改 commit message

    本文为原创文章,转载请标明出处 目录 修改上一条提交的 commit message 修改之前提交的 commit message 1. 修改上一条提交的 commit message git com ...

  3. Windows XP系列全下载(均为MSDN原版)

    正版windows xp sp3 下载大全(附:正版密钥) 微软MSDN Windows XP Professional下载 Windows XP Professional 简体中文 (最原始版本,无 ...

  4. Python---11模块

    在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很 ...

  5. MatterTrack Route Of Network Traffic :: Matter

    Python 1.1 基础 while语句 字符串边缘填充 列出文件夹中的指定文件类型 All Combinations For A List Of Objects Apply Operations ...

  6. cookie存在哪里???

    平时各位在做项目时多半时候都会用到客户端的cookie,可大家知道cookie是存储在哪里吗? 首先cookie失效分为2种: 1:设置过期时间失效(只要设置了过期时间cookie就会存储在硬盘里面) ...

  7. Flask admin Flask login 整合模板

    项目地址: https://github.com/WES6/supflask Flask admin 官方文档: https://flask-admin.readthedocs.io/en/lates ...

  8. babel-runtime 使用场景

    Babel 转译后的代码要实现源代码同样的功能需要借助一些帮助函数,例如,{ [name]: 'JavaScript' } 转译后的代码如下所示: 'use strict'; function _de ...

  9. Proto3:C++代码生成指南

    本章节实际上是介绍Protocol Buffer编译器从给定的protocol定义中生成的C++代码.所有proto2和proto3生成的代码不同之处都会高亮标出 --- 需要注意的是这些不同之处只是 ...

  10. iPhone 8价格狂跌:是国产手机的胜利,还是苹果的黄昏

    ​ 8价格狂跌:是国产手机的胜利,还是苹果的黄昏" title="iPhone 8价格狂跌:是国产手机的胜利,还是苹果的黄昏"> ​   其实呢,这年头发布新款智能 ...