CSS 3D transform(CSS的3D变换)

src1:好吧,CSS3 3D transform变换,不过如此!

评价:图文并茂地解释 CSS 3D transform 的基本概念及原理,超级通俗易懂,读后简直醍醐灌顶啊!!!幽默的程序员

笔记:

一、4个概念

1、突破口:三个方法
   3D transform 中的三个方法:
  (1)rotateX(angle):正面推倒
  (2)rotateY(angle):左右转
  (3)rotateZ(angle):横抱躺着

2、必不可少的perspective(透视、视角)
  没透视,不3D
  CSS 3D transform 透视点在浏览器的前方(即我们眼睛处)

3、translateZ 帮你寻找透视位置
  即让元素离自己的远近

4、transform-style
  两个属性值:
  (1)flat:表示平面的
  (2)preserve-3d:表示3D透视的

  一般而言,舞台元素 transform-style: preserve-3d

二、理解3个属性

1、关于perspective
  perspecitve属性的两种书写(不同表现见博客“六”)
  (1)对舞台元素(动画元素们的共同父辈元素)
  (2)对当前动画元素,与transform的其他属性一起

2、perspective-orign
  即为眼睛看的中心点

3、backface-visibility
  在CSS3的3D世界中,默认情况下,我们可以看到背后的元素
  为了切合实际,我们常常让后面的元素不可见,即 backface-visibility: hidden;

三、原理3层

eg.图片的旋转木马

  1 舞台 (加个视距,perspective: 800px)
    1.1 容器(加个3D视图声明,transform-style: preserve-3d)
      1.1.1 图片
      1.1.2 图片
      1.1.3 图片(为了不至于产生类似DNA的螺旋状效果-让position=absolute 公用同一个中心点)

参考:
【1】好吧,CSS3 3D transform变换,不过如此!http://www.zhangxinxu.com/wordpress/?p=2592

CSS 3D transform(CSS的3D变换)

时间: 2024-08-06 22:36:39

CSS 3D transform(CSS的3D变换)的相关文章

介绍css 的3D 变换(3D transform)

https://desandro.github.io/3dtransforms/docs/card-flip.html --------------------------------------------------------------------------------------------------- Card Flip We now have all the tools to start making 3D objects. Let's get started with the

【前端】3D变形(CSS)transform

3D变形(CSS)transform 2d x y 3d x y z CSS3中的3D坐标系与上述的3D坐标系是有一定区别的,相当于其绕着X轴旋转了180度,如下图 简单记住他们的坐标: x左边是负的,右边是正的 y 上面是负的, 下面是正的 z 里面是负的, 外面是正的 rotateX() 就是沿着 x 立体旋转. img { transition:all 0.5s ease 0s; } img:hove { transform:rotateX(180deg); } rotateY() 沿着y

深入理解CSS变形transform(3d)

前面的话 本文将详细介绍关于transform变形3D的内容,但需以了解transform变形2D为基础.3D变形涉及的属性主要是transform-origin.transform.transform-style.perspective.perspective-origin.backface-visibility 坐标轴 在了解透视之前,首先要先了解坐标轴.3D变形与2D变形最大的不同就在于其参考的坐标轴不同.2D变形的坐标轴是平面的,只存在x轴和y轴,而3D变形的坐标轴则是x.y.z三条轴组

深入理解 CSS变形 transform(3d)

坐标轴 在了解透视之前,首先要先了解坐标轴.3D变形与2D变形最大的不同就在于其参考的坐标轴不同.2D变形的坐标轴是平面的,只存在x轴和y轴,而3D变形的坐标轴则是x.y.z三条轴组成的立体空间,x轴正向.y轴正向.z轴正向分别朝向右.下和屏幕外 <!-- 在本身元素上设置透视无效果 --> <div style="float:left;margin-right: 10px;border:2px solid gray;"> <div style="

好吧,CSS3 3D transform变换,不过如此!

一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了~~ 看看下图女帝的动作以及神情,就可以知道名字带D的家伙的厉害! 最近折腾iPad的一些东西,有一些3D效果的交互.有些事情,总以为是遥远的未来,谁知真正发生的时候说来就来,比如说一颗想结婚的心,又比方说在实际项目中折腾3D transform效果. 然而,虽然以前折腾过3D变换效果(webkit

[ css 变换 transform 属性 ] css中transform属性讲解及实例演示的区别

一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了~~ 看看下图女帝的动作以及神情,就可以知道名字带D的家伙的厉害! 最近折腾iPad的一些东西,有一些3D效果的交互.有些事情,总以为是遥远的未来,谁知真正发生的时候说来就来,比如说一颗想结婚的心,又比方说在实际项目中折腾3D transform效果. 然而,虽然以前折腾过3D变换效果(webkit

CSS动画,2D和3D模块

CSS3提供了丰富的动画类属性,使我们可以不通过flash甚至JavaScript,就能实现很多动态的效果.它们主要分为三大类:transform(变换),transition(过渡),animation(动画).其中transform又分为2D变换和3D变换,它赋予了我们不通过专业设计软件制作平面或者立体图形的能力. 一 过渡 通过给元素设置transition属性设置它的过渡效果.过渡实际定义的是元素从一种状态变成另一种状态的过程,比如宽度从100px变成300px,背景颜色从red变成or

CSS3 3D transform变换

主要是看了这位大佬的文章,http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/,有的很大的收获,在上一个制作3D变形案例中明白了一些原理. 首先一个立体坐标系: 按照我的理解: 1.认识的突破口:rotateX, rotateY, rotateZ 3D transform中有下面这三个方法: rotateX( angle ) rotateY( angle ) ro

[ css 矩阵 Matrix 属性 ] css中transform的Matrix(矩阵)属性讲解及实例演示的区别

一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵)”的时候,难免会心生畏惧(即使你已经学过),正常心理.实际上,这玩意确实有点复杂. 然而,这却是屌丝逆袭的一个好机会. CSS同行间:你是不是有这样的感觉:哎呀呀,每天就是对着设计图切页面,貌似技术没有得到实质性地提升啊,或者觉得日后高度有限! 我们应该都知道二八法则(巴莱多定律),即任何一组东西中