CSS3基础03(3D②) 求粉丝

3 D

3.1)rotateY

围绕着Y轴进行旋转

(1)正数是(站在右边推),负数是(站在左边推)

2.1)定义元素背过去是否可见

  1. backface-visibility: visible|hidden;

说明:visible表示可见,hidden表示不可见

测试贝塞尔曲线的网址:http://xuanfengge.com/easeing/ceaser/

1)translateZ

就是在Z轴上来回移动,但是如果没有透视的情况下,完全看不出效果,所以,一般transform:translateZ()都是配合透视一起使用

小经验:translateZ和rotate结合会产生不一样的3D效果,不同的顺序的效果截然不同,如果先rotate 在translateZ 元素是在空间里面发生旋转 而如果是translateZ在rotate 元素是在直线上发生旋转。

正值是凸出,负值相反。

2)透视 (景深)

  1. perspective:值
    

      

说明:透视值越小,透视效果越强,值越大,透视效果越弱,透视添加在父级身上

3灭点(透视点,消失点)

  1. perspective-origin:值
    

      

就是3D怼的方向。

说明:值可以是像素,也可以是百分比,还可以是方位名词,默认值是50%,50%(中心点)

4)transform-style

作用:规定被嵌套元素如何在3D空间中显示

  1. tranform-style:值 preserve-3D
    

      

值说明:flat是默认值,让子元素不保留其3D位置, preserve-3d  让子元素保留其3D位置 ,加在父亲身上

小总结:透视 灭点 transform-style都是添加在父级身上

关键: 当元素发生3D翻转的时候,整个坐标系也跟着发生了翻转!!

5)css3的动画

  1. animation:值
    

      

值说明:

(1)自定义动画名

(2)动画的持续时间 单位是s或者ms

(3)动画的曲线

(4)动画从何时开始

(5)控制动画执行的次数  没有单位, 一直执行:infinite

(6)控制动画是否逆序播放  默认值normal  逆序:alternate

(7)控制动画的播放和暂停  默认值是播放:running   暂停:paused

(8)动画最后的停留位置  forwards 让动画停留在最后一帧

动画一定要先写animation 然后搭配@keyframes去写自定义的动画

@浏览器前缀keyframes 自定义的动画名{
  0%{
    //css语句
   }
   ...
  100%{
    //css语句
     }
  }

例:

  1.  1 @keyframes laowang{
     2 0%{
     3 width:100px;
     4 height:100px;
     5 left:0;
     6 transform:rotate(0deg);
     7 }
     8 50%{
     9 width:800px;
    10 height:800px;
    11 transform:rotate(720deg);
    12 }
    13 100%{
    14 width:500px;
    15 height:500px;
    16 left:800px;
    17 transform:rotate(-720deg);
    18 }
    19 }

(4)帧动画

steps(帧数)

其实就是让动画分成多少步去执行,steps()里面的数值是总画面数 - 1 ,在制作精灵图的时候每个画面的宽度尽量一致,并且建议在一行里面摆放

(5)animate.css库的使用

官网:https://daneden.github.io/animate.css/

作用:将一切常见的动画直接封装,开发者不需要考虑实现过程,只需要添加对应的类就能实现动画效果

使用步骤:

(1)将下载下来的animate.css 引入到你的项目中

(2)去官网获取想要的效果 给对应的元素添加上animated 类 (必填)和你想要的效果的类

时间: 2024-11-05 12:24:37

CSS3基础03(3D②) 求粉丝的相关文章

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平面,图像之所以具有立体感(3

一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   源码下载 简要教程 这是一款效果非常炫酷的jQuery和CSS3 3D旋转画廊特效插件.第一个DEMO是一个简单的例子,使用CSS3来制作3d旋转效果,然后用js来控制前后导航按钮.第二个DEMO是第一个DEMO的升级版,它增加了图片标题.查看图片.键盘控制等其它功能. HTML结构 这个3D画廊

用纯原生态javascript+css3 写的3D魔方动画旋扭特效

一直从事于后端编程工作,工作中也经常接触和使用一些前段技术,但大多数还是用于操作和控制数据与客户端交互工作.随着互联网技术的发展以及硬件性能的不断提升,人们对于交互式体验已变得越来越重视,进而前端技术已经越来越突显出它的重要性,特别是一些炫酷的特效,精美的UI设计,都使人眼前一亮,顿时觉得网站平台都高大上不少,很博人们眼球,给人们以很好的视觉冲击,特别是现在的css3,HTML5技术的更新,使得以更小的代价就可以轻松实现这些效果,故此,俺也顿时膜拜起前端技术,悠然起了兴趣,跃跃欲试,随机利用cs

css3+jquery制作3d旋转相册<转>

css3+jquery制作3d旋转相册 首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准备 新建三个文件夹分别命名为css,js,img分别存放demo.css,jquery.js.demo.js,11张示例图片.新建demo.html将demo.css,jquery.js,demo.js引入. 二.图片倒影制作 1 <div id="wr

css3实践—创建3D立方体

css3实践-创建3D立方体 要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果.不过有很多需要注意的地方,这里把我学习的方法,过程分享给大家.再讲知识点之前,还是先弄清楚3D的坐标系吧,从网上搜了一张经典坐标系图,供大家回顾一下. 1.3D试图 transform-style:flat(默认,二维效果) / preserve-3d(三维效果).设置一个元素的transform-style:pres

SQL Server 基础 03 查询数据基础

查询数据 简单的查询 1 create table stu_info 2 ( 3 sno int not null 4 ,sname varchar(20) not null 5 ,sex varchar(2) not null 6 ,birth varchar(20) not null 7 ,email varchar(20) not null 8 ,telephone int not null 9 ,depart varchar(20) not null 10 ) 11 12 13 sele

js和CSS3炫酷3D相册展示

<!doctype html> <html> <head> <meta charset="UTF"> <title>js和CSS3炫酷3D相册展示</title> <style> *{margin:0;padding:0;} body{background:url(img/bg.jpg);width:100%;height:100%;overflow:hidden;}; h1{width:277;hei

《HTML5和CSS3基础教程》-笔记1

笔记(第一.二章整合) 1,HTML思想: 编写HTML是为网页内容打上能够描述它们的标签.并且,HTML元素描述的是:内容是什么,而非看起来是什么样. 即: a,HTML:用标签去说明网页内容的含义. b,语义化HTML:用最恰当的HTML元素去说明网页内容的含义. c,结构和表现完全分离.网页内容是什么,由HTML说明.网页内容什么样,由CSS说明. 另:为什么语义化很重要? 无障碍访问:搜索引擎优化(网页在搜索引擎的排名会靠前):更容易维护代码和添加样式. 2,网页构造块: 网页可保存为纯

纯CSS3彩色边线3D立体按钮制作教程

今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示效果,而且我们把制作教程也分享出来,首先来看看效果图: 我们也可以在这里看到这些按钮的DEMO演示. 接下来就来分享一下制作教程以及源代码,按钮的源代码主要由HTML和CSS两部分代码组成,先来看看HTML代码: <button class="blue"> <div class="wrapper"