3D变形tranform（附实例、图解）

旋转rotate
透视perspective
translateZ
translate3d
动画 animation

前言

css中三个方向的设定为：
X左边是负值，右边是正值
Y上边是负值，下边是正值
Z里面是负值。外面是正值

正文

旋转rotate

rotateX(); 沿x轴旋转
RotateY(); 沿y轴旋转
RotateZ(); 沿z轴旋转

透视perspective

透视原理：近大远小
perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
perspective一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

例子：

 body {perspective: 1000px;   /*视距  距离 眼睛到屏幕的距离*/}
img:hover {transform: rotateY(60deg);}

translateZ

TranslateZ的直观表现形式就是大小变化，实质是XY平面相对于视点远近变化（参照物为perspective属性）。比如说设置了perspective为200px，那么transformZ的值越接近200，就是离得越近，看上去也就越大，超过200就看不到了，相当于跑到后脑勺去。

透视是眼睛到屏幕的距离透视只是一种展示形式是有3d效果的意思
translateZ 是物体到屏幕的距离 Z 就是来控制物体近大远小的具体情况
translateZ 越大，我们看到的物体越近，物体越大

translate3d

相当于和写

transform: translate3d(x,y,z); x跟y可以是px也可以是%，但是z只能是px

动画 animation

<’ animation-name '>：检索或设置对象所应用的动画名称
<’ animation-duration '>：检索或设置对象动画的持续时间
<’ animation-timing-function '>：检索或设置对象动画的过渡类型
<’ animation-delay '>：检索或设置对象动画延迟的时间
<’ animation-iteration-count '>：检索或设置对象动画的循环次数
<’ animation-direction '>：检索或设置对象动画在循环中是否反向运动
<’ animation-fill-mode '>：检索或设置对象动画时间之外的状态
<’ animation-play-state '>：检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

例子：

animation: azhumei 2s ease 0s infinite;  /*引用动画*//* 动画名称是自定义的   *//* infinite  无限循环 *//* 一般情况下，我们就用前2个 animation: azhumei 2s； */
/* @keyframes 动画名称 {} 定义动画 */@keyframes azhumei{0% {   /*起始位置  等价于刚才的 from*/transform: translate3d(0,0,0);}25%{transform: translate3d(800px,0,0);}50% {transform: translate3d(800px,400px,0);}75% {transform: translate3d(0,400px,0);}100% {transform: translate3d(0,0,0);   /*相当于结束*/}}

3D变形tranform（附实例、图解）相关推荐

再谈三角形整理形态（附实例图解）
对称三角形的定义.市场含义.各项要点.研判诀窍.案例分析.上升/下降三角形的基本概念.市场含义.要点提示.注意事项.形态举例.还有底部三角形.扩散三角形.研判要点.操作要点. 千帆竞发的网易博客相关 ...
从零开始的AI·吃透kNN算法，学完我悟了（附实例代码）
从零开始的AI系列从零开始的AI·机器学习の基本概念从零开始的AI·决策树原来这么好理解(附实例代码) 从零开始的AI·朴素贝叶斯?拿来吧你(附实例代码) 文章目录从零开始的AI系列前言一. ...
Background 全属性实例图解（10种全）(一)
Background 全属性实例图解(10种全)(一) 本文目录: 一.background属性: (1).属性描述 (2).background属性使用示例 (3).background动画属性 ( ...
html css3d效果,html，css的3D变形
html,css的3D变形: 首先要了解一个概念:景深perspective 景深可以营造一个近大远小的效果,在IE.opera浏览器目前不支持这个属性,在safari和chrome里,要用-webk ...
vuex结合php,vuex中store的使用介绍（附实例）
本篇文章给大家带来的内容是关于vuex中store的使用介绍(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.状态管理(vuex)简介 vuex是专为vue.js应用程序 ...
php xml对象解析_php解析xml 的四种简单方法(附实例)
XML处理是开发过程中经常遇到的,PHP对其也有很丰富的支持,本文只是对其中某几种解析技术做简要说明,包括:Xml parser, SimpleXML, XMLReader, DOMDocument. ...
从零开始的AI·决策树原来这么好理解（附实例代码）
从零开始的AI系列从零开始的AI·机器学习の基本概念从零开始的AI·吃透kNN算法,学完我悟了(附实例代码) 从零开始的AI·朴素贝叶斯?拿来吧你(附实例代码) 文章目录从零开始的AI系列前言 ...
从零开始的AI·朴素贝叶斯？拿来吧你（附实例代码）
从零开始的AI系列从零开始的AI·机器学习の基本概念从零开始的AI·吃透kNN算法,学完我悟了(附实例代码) 从零开始的AI·决策树原来这么好理解(附实例代码) 文章目录从零开始的AI系列前言 ...
python线程创建对象_Python线程下thread对象的用法介绍（附实例）
本篇文章给大家带来的内容是关于Python线程下thread对象的用法介绍(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Thread对象 Thread类用于表示单独的控制 ...
如何用PPT来实现三维3D效果，附参数设置详解
原文链接: 如何用PPT来实现三维3D效果,附参数设置详解

3D变形tranform（附实例、图解）

3D变形tranform（附实例、图解）相关推荐

最新文章

热门文章