CSS3 03. 3D变换、坐标系、透视perspective、transformZ、transform-style添加3D效果、backface-visibility元素背面可见、动画animation、@keyfarmes、多列布局

1、左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图

CSS中的3D坐标系

CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图

左手法则

左手握住旋转轴，竖起拇指指向旋转轴正方向，正向就是其余手指卷曲的方向。

透视 perspective

perspective：400px；

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective有两种写法

a) 作为一个属性，设置给父元素，作用于所有3D转换的子元素

b) 作为transform属性的一个值，做用于元素自身

transform：translateZ（50px）

　　沿Z轴移动，需要给父盒子添加透视 perspective：Number；

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/01-3D变换/06-3D-translateZ.html

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/01-3D变换/ppp.html

3D呈现 transform-style：3d

　　给父盒子添加，让子盒子存在真3d效果

　　指定子元素定位在3d空间中

　　flat：默认值，扁平化

backface-visibility：hidden；设置元素背面是否可见

伪元素获取自定义属性：  content：attr(自定义的属性名)

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/01-3D变换/案例/03-反转文字-练习.html

动画

　　

1、必要元素：

a、通过@keyframes指定动画序列；

b、通过百分比将动画序列分割成多个节点；

c、在各节点中分别定义各属性

d、通过animation将动画应用于相应元素；

2、关键属性

a、animation-name设置动画序列名称

b、animation-duration动画持续时间

c、animation-delay动画延时时间

d、animation-timing-function动画执行速度

　　linear：匀速／ease：减速／ease-in：加速／ease-out：减速／ease-in-out：先加速 后减速

e、animation-play-state动画播放状态，running、paused等

f、animation-direction动画逆播，alternate反向normal正常

g、animation-fill-mode动画执行完毕后状态，forwards保持结束后的状态、backwards等

h、animation-iteration-count动画执行次数，inifinate等

i、steps(60) 表示动画分成60步完成

若所有属性都需要过渡： transition-property: all;

参数值的顺序：

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意

http://mingm/demo/09-HTML+CSS3/25-CSS3-第三天/02-动画/案例/fishes/02-testfish.html

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/02-动画/案例/fishes/01-fish01.html

案例：

大海波涛

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/02-动画/案例/大海波涛/index.html

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/02-动画/案例/动态进度条/index.html

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/02-动画/案例/动态进度条/index.html

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/02-动画/案例/全屏切换/01-全屏切换练习.html

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/02-动画/案例/跳动的心/index.html

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/02-动画/案例/无缝滚动/01-无缝滚动-练习.html

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/02-动画/案例/宇宙/index.html

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/02-动画/案例/钟表/index.html

多列布局

column-count ： number

　　number 是几 就分几列；

　　chrome不支持

column-rule: 1px dashed red ; 分割线

column-gap: 30px;列间间距

colume-width： 列宽度

column-span：all／none     用于 <H1>标签 ，标题跨列或不跨列

http://mingm/demo/09-HTML+CSS3/25-CSS3-第三天/03-多列布局/01%20多列布局.htmlmingm/demo/09-HTML+CSS3/25-CSS3-第三天/03-多列布局/01%20多列布局.html

时间： 2024-08-24 20:00:02

CSS3 03. 3D变换、坐标系、透视perspective、transformZ、transform-style添加3D效果、backface-visibility元素背面可见、动画animation、@keyfarmes、多列布局的相关文章

css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）

本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(css3版 chrome only) 3D标签云(js版 chrome only) 前文回顾 在前面的文章css3实践之图片轮播(Transform,Transition和Animation)中我们简单地了解了css3旗下的transform.transition以及animation.回顾一下,tr

CSS3之3d变换与关键帧

3d变换是在transform基础上实现的 transform-style:preserve-3d; 建立3d空间 perspective:; 景深(设置用户看的距离) perspective-origin:center center;(默认) 景深基点(设置用户从哪个方向看) backface-visility 隐藏背面 -transform:; 在3d中新增了以下函数: rotateX() rotateY() rotateZ() translateZ() scaleZ() 注: X表示屏幕水

css3 3D变换和动画

3D变换和动画 建立3D空间,transform-style: preserve-3d perspective: 100px; 景深 perspective-origin:center center -180px;  景深基点 transform新增函数如下: rotateX(); rotateY(); rotateZ(); translateZ(); scaleZ(); 3d动画demo,只支持Webkit内核,可自行运行查看效果 <!DOCTYPE HTML> <html> &

CSS3 3D变换实例 滚动的正方体

笔记: 2D变换 transform 位移   translateX() translateY()  简写:translate(X值,Y值)  正值向右,负值向左 旋转 rotate()  rotate(?deg)  括号中为角度值   正值是顺时针旋转,负值是逆时针旋转 缩放 scale()  scale() 括号中为数值,可以为浮点数     如大于1是放大效果,小于1是缩小效果 变形(斜切)  skewX() skewY() 简写:skew(X轴斜切角度,Y轴斜切角度) body:hove

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

Web 前端技术：CSS3---新属性，浏览器支持度，圆角边框（border-radius），阴影（box-shadow），文字与字体（text-shadow属性、word-wrap属性、@font-face规则），2D转换、过渡与动画（transform属性），3D变换

浏览器支持度 CSS3属性: columns:规定列的宽度和列数 默认宽度.列数值为auto column-width:每栏的宽度 column-gap :两栏之间的间距距离 column-count : 栏目的数目 column-rule : color(色值) width(宽度) style(线条样式) 分栏中的分割线的颜色宽度及样式的设定 1.border-radius属性(圆角边框) eg: 结合不同浏览器兼容问题,使用该CSS3新属性 eg: 2.box-shadow属性(阴影) eg

基本3D变换之World Transform, View Transform and Projection Transform

作者:i_dovelemon 来源:CSDN 日期:2014 / 9 / 28 主题:World Transform, View Transform , Projection Transform 引言 在3D图形学中,基本几何变换是一个非常重要的操作.可以说,整个3D图形能够有效的显示,就是由于几个非常重要的基础3D变换贡献的.在前面的文章中,向大家承诺了,要详细的讲解在3D图形学中的三个基本的坐标变换.今天,就来像大家讲述,DirectX是如何进行变换. 变换的目的 在我们讲解具体的变换工作之

css之3D变换

3D变换的x,y,z轴是分别效果是: x轴旋转的话,就是头和脚进行转动 y轴旋转的话,就是左右手进行转动 z轴旋转的话,就是整个身体平铺在旋转. 上面是针对旋转的意思去,但是对于其他的类似一样,就是这样子去理解x,y,z轴的在哪里的 transform: rotateX(360deg); transform: rotateY(360deg); transform: rotateZ(360deg); 变换跟2D同理 最主要的区别是透视视图"景深" <!--景深的作用: 1.让3D场

关于transform2D和3D的坐标系问题

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Document</title> 6 <style> 7 *{ 8 margin: 0; 9 padding:0; 10 } 11 .con{ 12 width:300px; 13 height: 300px; 14 ba