3D transform

transform进行动画演示时,是以元素的中心为基准点的,可以使用transform-origin改变元素转变的基准点。

所有的transform动作改变都会引起X、Y轴的坐标变化。

perspective:3000px表示我们眼睛距离屏幕3000px时观看到的效果。呈现在显示器中。一般来说perspective属性都应用在父元素上,我们可以把这个父元素称为舞台元素.表透视,近大远小。

transform: translateZ(400px):立方体前面正对着屏幕,所以不用旋转,只需向Z轴前移动距离。

1、旋转rotateX(),rotateY()

参考的链接:

◆http://www.cnblogs.com/xiaohuochai/p/5350254.html

◆https://www.cnblogs.com/grey-zhou/p/5174114.html

remain:关于rotateX、rotateY的转换角度,绕着X、Y轴旋转后整个坐标会一起旋转,也就是坐标系永远同元素一起变动,每个元素有自己的坐标系,元素的初始状态中,原点在元素的中心。坐标系的方向:X轴方向水平向右,Y轴方向竖直向下,Z轴垂直屏幕,朝向我们,即正对的方向就是自己的Z轴方向,各坐标轴的起点在原点。自己想象3D旋转时,X、Y、Z轴不变,视线垂直屏幕不需要跟着旋转,Z轴方向一定是div正面朝向。

比如说rotateX()、rotateY()在没有设定坐标是以元素的中心为基点,但设置transform-origin后会发生改变。

以下的例子是元素旋转了那Z轴也会一起变动,内和外是相对于Z轴来说的,Z轴方向的是外,反之是内。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>想了两天,终于有点眉目了!又一下子懵了...略懂了(脑壳痛、三维空间不是很好,弄了三天)</title>
<style>
body {
margin: 70px;
} .a {
position: relative;
display: inline-block;
z-index: 4;
width: 180px;
height: 210px;
margin-top: 90px;
margin-right: 80px;
/* 测试元素的旋转角度 */
/* 去掉perspective有不同的效果 */
background: lightpink;
perspective: 900px;
} h3, p {
/*position: absolute;*/
margin-top: 30px;
margin-bottom: -30px;
} div.b, div.b1, div.c, div.c1,
div.bb, div.bb1, div.cc, div.cc1,
div.bbb, div.bbb1, div.ccc, div.ccc1 {
position: absolute;
z-index: 2;
width: 180px;
height: 210px;
background: lightblue;
} .b {
transform: rotateY(45deg); /* 向里面旋转 */
transform-origin: 0 0;
} .b1 {
transform: rotateY(-45deg);/* 向外面旋转 */
transform-origin: 0 0;
} .c {
transform: rotateX(30deg); /* 向外面旋转 */
transform-origin: 0 0;
} .c1 {
transform: rotateX(-30deg); /* 向里面旋转 */
transform-origin: 0 0;
} .bb {
transform: rotateX(-30deg) rotateY(45deg);
transform-origin: 0 0;
} .bb1 {
transform: rotateX(-30deg) rotateY(-45deg);
transform-origin: 0 0;
} .cc {
transform: rotateX(30deg) rotateY(-45deg);
transform-origin: 0 0;
} .cc1 {
transform: rotateX(30deg) rotateY(45deg);
transform-origin: 0 0;
} .bbb {
transform: rotateY(45deg) rotateX(-30deg);
transform-origin: 0 0;
} .bbb1 {
transform: rotateY(-45deg) rotateX(-30deg);
transform-origin: 0 0;
} .ccc {
transform: rotateY(-45deg) rotateX(30deg);
transform-origin: 0 0;
} .ccc1 {
transform: rotateY(45deg) rotateX(30deg);
transform-origin: 0 0;
}
</style>
</head>
<body>
<h4 style="color:red">注意:旋转之后坐标轴的转换方向</h4>
<h3>Y轴和X轴上的转换↓</h3>
<div class="a">
<div class="b">y45<br>rotateY(+deg),绕Y轴,X轴由平面往里面旋转,X轴方向改变,由平面向里逆时针旋转。</div>
</div>
<div class="a">
<div class="b1">y-45<br>rotateY(-deg),绕Y轴,X轴由平面往外面旋转,X轴方向由水平顺时向旋转一定角度发生改变</div>
</div>
<div class="a">
<div class="c">x30<br>rotateX(+deg),绕X轴,Y轴由平面向外旋转,Y轴的方向由竖直向下往外面旋转一定角度发生变换</div>
</div>
<div class="a">
<div class="c1">x-30<br>rotateX(-deg),绕X轴,Y轴由平面向里旋转,Y轴的方向由竖直向下往里面旋转一定角度发生转换</div>
</div>
<h3>先X轴后Y轴多值转换↓</h3>
<p>没有perspective属性情况下,看似Y轴没有变化</p>
<div class="a">
<div class="bb">x-30 y45 向上</div>
</div>
<div class="a">
<div class="bb1">x-30 y-45 向下</div>
</div>
<div class="a">
<div class="cc">x30 y-45 向上</div>
</div>
<div class="a">
<div class="cc1">x30 y45 向下</div>
</div>
<h3>先Y轴后X轴多值转换↓</h3>
<p>没有perspective值得情况下,看似X轴没有变化</p>
<div class="a">
<div class="bbb">y45 x-30 </div>
</div>
<div class="a">
<div class="bbb1">y-45 x-30 </div>
</div>
<div class="a">
<div class="ccc">y-45 x30 </div>
</div>
<div class="a">
<div class="ccc1">y45 x30 </div>
</div>
</body>
</html>

 2、倾斜skew()、skewX()、skewY()

skew(xdeg [,ydeg]) 如果省略一个,则默认是skewX,Xdge或Ydeg没有的话则表示为0 。

skew的变换,也会引起坐标系的变换。

skewX:表示Y轴向X轴倾斜,变动的是Y轴,所以X轴是不变的,两条水平线长度且在Y轴坐标不变,故表示垂直距离不变,则表示高度不变;Y轴的倾斜会引起竖直方向的线发生倾斜,则引起对角线长度发生变化,对角线越长,表示倾斜角度越大,当角度为90°或270°时,则会和X轴重合,元素被隐藏。

skewX(+deg):Y轴向X轴正方向(向右)倾斜【逆时针】

skewX(-deg):Y轴向X轴反方向(向左)倾斜【顺时针】

skewY:表示X轴向Y轴倾斜,变动的是X轴,所以Y轴是不变的,两条垂直线长度且在X轴坐标不变,故表示水平距离不变,则表示高度不变;X轴的倾斜会引起水平方向的线发生倾斜,则引起对角线长度发生变化,对角线越长,表示倾斜角度越大,当角度为90°或270°时,则会和Y轴重合,元素被隐藏。

skewY(+deg):X轴向Y轴正方向(向下)倾斜【顺时针】

skewY(-deg):X轴向Y轴反方向(向上)倾斜【逆时针】

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倾斜</title>
<style>
body {
margin: 100px;
} /* 在.wrapper和.wrapper div中添加position,这样不至于在skew*中添加文字时会出现元素位置移动, 、
* 其实不是很明白为什么会位置发生变化,也不是很明白position对它们位置变化有什么作用。
* */
.wrapper {
position: relative;
display: inline-block;
width: 150px;
height: 150px;
margin-top: 60px;
margin-right: 40px;
background: lightpink;
perspective: 800px;
} p {position: absolute; right: 0; bottom: 0; margin: 0;} .wrapper div {
position: absolute;
width: 80px;
height: 80px;
background: lightblue;
border-top: 1.5px solid #00f;
border-bottom: 1.5px solid #00f;
border-right: 1.5px solid #f00;
border-left: 1.5px solid #f00;
} .skew3 {
transform: skewX(30deg);
transform-origin: 0 0;
} .skew4 {
transform: skewX(-30deg);
transform-origin: 0 0;
} .skew1 {
transform: skewY(30deg);
transform-origin: 0 0;
} .skew2 {
transform: skewY(-30deg);
transform-origin: 0 0;
} .skew5 {
transform: skew(30deg, 30deg);
transform-origin: 0 0;
} .skew6 {
transform: skew(45deg, -45deg);
transform-origin: 0 0;
} .skew7 {
transform: skew(-30deg, 30deg);
transform-origin: 0 0;
} .skew8 {
transform: skew(-30deg, -30deg);
transform-origin: 0 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="skew3"></div>
<p>X30</p>
</div>
<div class="wrapper">
<div class="skew4"></div>
<p>X-30</p>
</div>
<div class="wrapper">
<div class="skew1"></div>
<p>Y30</p>
</div>
<div class="wrapper">
<div class="skew2"></div>
<p>y-30</p>
</div>
<div class="wrapper">
<div class="skew5"></div>
<p>x30 y30</p>
</div>
<div class="wrapper">
<div class="skew6"></div>
<p>x30 y-30</p>
</div>
<div class="wrapper">
<div class="skew7"></div>
<p>x-30 y30</p>
</div>
<div class="wrapper">
<div class="skew8"></div>
<p>x-30 y-30</p>
</div>
</body>
</html>

我本来想弄清楚这个:transform: skew  rotate 的,但是当前还不是很明白,所以这个留着以后再弄吧。

												

关于transform属性的一些理解的更多相关文章

  1. 理解SVG坐标系统和变换: transform属性

    SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换.然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别.在这篇文章中我们讨论SVG的transf ...

  2. 图层的transform属性

    Main.storyboard // //  ViewController.m //  7A11.图层的transform属性 // //  Created by huan on 16/2/4. // ...

  3. 通过transform属性改变图片的位置大小等信息

    对UIImageView的位置大小方向的改变可以通过改变其transform属性值实现. 位置改变: var transform = CGAffineTransformMakeTranslation( ...

  4. 关于html标签和属性的基本理解

    一.关于标签和属性的基本理解: html页面的内容主要由"元素"或"标签"组成.使用标签来描述网页的内容. 标签tag一般都是成对出现,开始标签和结束标签,或者 ...

  5. 2016 - 1- 14 UI阶段学习补充 transform属性详解

    UIView的transform属性 transform是view的一个重要属性,它在矩阵层面上改变view的显⽰状态,能实现view的缩放.旋转.平移等功能.transform是CGAffineTr ...

  6. transform属性

    transform属性 在OC中,通过transform属性可以修改对象的平移.缩放比例和旋转角度常用的创建transform结构体方法分两大类 (1) 创建“基于控件初始位置”的形变 CGAffin ...

  7. Swift - 通过设置视图的transform属性实现动画

    设置视图对象的transform属性,可以实现各种动画效果. 1,移动 指在同一平面内,将控件按照某个直线方向平移一定的距离. 1 2 3 4 5 //每次都从当前位置平移 self.imageVie ...

  8. 11--tag 和transform属性

    tag 和transform属性 1.tag 标签,就相当于身份识别的标码,可以通过tag值获取对应的对象. 2.使用transform 实现对象的平移和旋转. // // ViewControlle ...

  9. IOS(二)基本控件UIButton、简易动画、transform属性、UIImageView

    UIButton //1.设置UIButton 的左右移动 .center属性 获得 CGPoint 来修改x y //1.设置UIButton 的放大缩小 bounds属性 获得CGRect 然后通 ...

随机推荐

  1. 什么是通知(Advice)?

    特定 JoinPoint 处的 Aspect 所采取的动作称为 Advice.Spring AOP 使用一 个 Advice 作为拦截器,在 JoinPoint "周围"维护一系列 ...

  2. 为什么WAIT必须在同步块中

    我们知道java的Object有wait和notify方法,如果要使用wait和notify的话,那么必须在synchronized块中,否则会抛出IllegalMonitorStateExcepti ...

  3. 攻防世界 Ditf misc

    Ditf 附件下载下来就是一张图片,我们拉到hxd中发现应该有隐藏的压缩包 我们拉入到kali里面分析 意外发现图片高度被修改过我们先用binwalk分析图片看看 我们先尝试分离一下分离出一个压缩包但 ...

  4. Numpy中重要的广播概念

    Numpy中重要的广播概念 广播:简单理解为用于不同大小数组的二元通用函数(加.减.乘等)的一组规则 广播的规则: 如果两个数组的维度数dim不相同,那么小维度数组的形状将会在左边补1 如果shape ...

  5. IT架构和架构类型

    What is IT Architecture & Types of Architectures | ITARCH.INFO What is IT Architecture & Typ ...

  6. ionic3 教程(五)基本的网络请求

    链接: ionic3教程(一)安装和配置 ionic3教程(二)登录页制作 ionic3教程(三)设置页制作 ionic3教程(四)安卓硬件返回键处理ionic3 教程(五)基本的网络请求 这是最后一 ...

  7. canvas实现平铺水印

    欲实现的水印平铺的效果图如下: 从图上看,应该做到以下几点: 文字在X和Y方向上进行平铺: 文字进行了一定的角度的旋转: 水印作为背景,其z-index位置应位于页面内容底部, 即不能覆盖页面主内容: ...

  8. C语言---魔方阵

    魔方阵的定义:在n*n的方阵中,每一行的和=每一列的和=对角线的和.(本文中涉及的n为大于3的奇数). 例如3*3的魔方阵为: 5*5的魔方阵为: 如何写魔方阵呢? 1.数字1位于第一行的正中间2.下 ...

  9. FastAPI(六十八)实战开发《在线课程学习系统》接口开发--用户 个人信息接口开发

    在之前的文章:FastAPI(六十七)实战开发<在线课程学习系统>接口开发--用户登陆接口开发,今天实战:用户 个人信息接口开发. 在开发个人信息接口的时候,我们要注意了,因为我们不一样的 ...

  10. 常见的JVM 面试题

    1.讲一讲JVM的跨平台与跨语言 跨平台 我们写的一个类,在不同的操作系统上(Linux.windows.Mac OS)执行,效果是一样的.这就是JVM的跨平台性. 跨语言 JVM只识别字节码,JVM ...