transform的坐标是需要了解的特性。

我们的rotateX,rotateY,rotateZ,和translateX,translateY等都是基于相同的坐标系来定位的。

3D的坐标如下入所示：

3D transform中有下面这三个方法：

rotateX( angle )
rotateY( angle )
rotateZ( angle )

理解了这三个方法，后面更难懂的perspective就好下手了，可以说是突破口！

rotate旋转的意思，rotateX旋转X轴，rotateY旋转Y轴，rotateZ旋转Z轴,其中：

它们使用angle值作为参数。如果是正角度，元素顺时针旋转。如果是负角度，元素逆时针旋转。

2. 必不可少的perspective属性

perspective属性的存在与否决定了你所看到的是2次元的还是3次元的，也就是是2D transform还是3D transform.

我们看demo1:

<!DOCTYPE html>
<html>
<head>
<style>
#div1{position: relative;height: 150px;width: 150px;margin: 50px;padding:10px;border: 1px solid black;/*perspective:150;-webkit-perspective:150; /* Safari and Chrome */*/
}
#div2 {padding:50px;position: absolute;border: 1px solid black;background-color: yellow;transform: rotateX(45deg);-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1"><div id="div2">HELLO</div>
</div>
</body>
</html>

是否添加perspective属性，显示的样式分别如下：

我们要知道：

CSS3 3D transform的透视点是在浏览器的前方！

或者这么理解吧：显示器中3D效果元素的透视点在显示器的上方（不是后面），近似就是我们眼睛所在方位！

比如：

一个1680像素宽的显示器中有张美女图片，应用了3D transform，同时，该元素或该元素父辈元素设置的perspective大小为2000像素。

则这张美女多呈现的3D效果就跟你本人在1.2个显示器宽度的地方(1680*1.2≈2000)看到的真实效果一致！！

perspective属性有两种书写形式，一种用在舞台元素上（动画元素们的共同父辈元素）；第二种就是用在当前动画元素上，与transform的其他属性写在一起。如下代码示例：

demo2如下：

 .container {display: block;width: 200px;height: 200px;margin-bottom: 50px;border: 1px solid #bbb;
}
.box {width: 100%;height: 100%;opacity: .75;
}#darkred .box {background-color: darkred;transform: perspective(600px) rotateY(45deg);
}#darkblue {perspective: 600px;
}
#darkblue .box {background-color: darkblue;transform: rotateY(45deg);
}
</style>
</head>
<body><section id="darkred" class="container"><div class="box"></div></section><section id="darkblue" class="container"><div class="box"></div></section>
</body>

效果图如下：

这两种写法的效果存在很大的区别：

上面舞台整个作为透视元素，因此，显然，我们看到的每个子元素的形体都是不一样的；

而下面，每个元素都有一个自己的视点，因此，显然，因为rotateY的角度是一样的，因此，看上去的效果也就一模一样了！

perspective-origin

perspective-origin这个属性超级好理解，表示你那双色迷迷的眼睛看的位置。默认就是所看舞台或元素的中心。

transform-style: preserve-3d

transform-style属性也是3D效果中经常使用的，其两个参数，flat|preserve-3d.

前者flat为默认值，表示平面的；后者preserve-3d表示3D透视。

基本上，我们想要根据现实经验实现一些3D效果的时候，transform-style: preserve-3d是少不了的。

一般而言，该声明应用在3D变换的兄弟元素们的父元素上，也就是舞台元素。

转载于:https://www.cnblogs.com/xuzhudong/p/7910973.html

CSS3 3D transform变换相关推荐

好吧，CSS3 3D transform变换，不过如此！
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=2592 一.写在前面 ...
CSS3 3D transform变换，不过如此
(这篇关于css 3d的文章算是开启了我的css3d概念了,确实写的很容易理解,小编苦苦寻找的经典好文) 一.写在前面的秋裤早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王 ...
详解如何用 CSS3 完成 3D transform变换
Tips:阅读提示!!! 首先,本文针对的是3D transform变换的学习,所以你需要对 2D transform变换有一定的了解其次,需要说明的是,代码是一种需要自己不断实践的学科,建议各位 ...
CSS3 3D transform
目录一.transform简介 1.定义和用法 2.浏览器支持 3.语法二. 学习步骤 1. 前情提要 2. 什么是3D transform变换 3. 关键点:rotateX, rotateY, ...
html5实现3d翻页效果,利用css3 3d transform制作超逼真翻书效果
本教程给大家带来一个非常有创意的翻书效果,使用的是css 3D transforms属性和css transitions属性.这里将给你展示两种不同的图书设计:精装书和平装书.这两种设计只需要简单的改 ...
深入理解css3 3d变换
转载地址:https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ ...
css 3d transform
原文:大神传送门一.写在前面的秋裤早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里 ...
CSS3:3D变换动画
CSS3:3D变换动画 2D状态下,给元素设置沿着X轴旋转45deg <!DOCTYPE html> <html lang="en"><head> ...
html图片旋转换图片,5. CSS3 transform变换、翻转图片示例
仅供学习,转载请注明出处 CSS3 transform变换 1.translate(x,y) 设置盒子位移 2.scale(x,y) 设置盒子缩放 3.rotate(deg) 设置盒子旋转 4.ske ...

CSS3 3D transform变换

2. 必不可少的perspective属性

perspective-origin

transform-style: preserve-3d

CSS3 3D transform变换相关推荐

最新文章

热门文章