前言:这是篇CSS3中关于3D效果与动画相关的内容。

(1)在CSS3的3D效果中,需要结合透视perspective的属性才能看到3d的效果,这个属性在屏幕上实现了元素近大远小的效果,所以要使用CSS3的3d相关属性,需要记得写perspective。

(2)在CSS3的3d坐标系与数学中的坐标系有所区别,主要是在y轴正方向的规定上。

  • x轴正方向:从左往右
  • y轴正方向:从上至下
  • z轴正方向:从里至外

旋转

在C3的2D变换中,rotate代表了元素围绕Z轴旋转一个角度,3d中还有围绕X和Y轴旋转。

1.rotateX:值 单位:deg

让元素围绕着X轴进行旋转

  • 人眼正视X轴正方向,正值是顺时针方向,负值时逆时针方向。
  • 没有透视的3D是看不出来方向
  • 加perspective后看到的效果就是正值元素向屏幕里倒,负值向屏幕外倒。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
perspective: 600px;
}
.box{
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
transform: rotateX(45deg);
transition: all ease .5s;
}
.box:hover{
transform: rotateX(-45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

2.rotateY:值

围绕着Y轴进行旋转

  • 正数是逆时针 (站在右边推门),负数是顺时针(站在左边推门)
  • 人眼正视y轴正方向,正值是顺时针方向,负值时逆时针方向。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
perspective: 600px;
}
.box{
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
transform: rotateY(45deg);
transition: all ease .5s;
}
.box:hover{
transform: rotateY(-45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

3.rotate3d(x,y,z,deg);

rotate3d将rotateX,rotateY,rotateZ3个属性结合起来写,它的参数值x、y、z表示了旋转的3个方向,取值是0~1,deg表示了旋转的角度。(这个属性的具体用法目前不太会使用,使用时经常不能出现预期结果,可能使用方式不对,以后研究。)

平移

在2d变换中translateX和translateY,代表沿X轴和Y轴平移,3d中还有translateZ,沿Z轴平移。

translateZ

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
perspective: 900px;
}
.box{
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
transition: all 2s;
}
.current{
/*transform: rotateX(360deg) translateZ(500px);*/
transform:translateZ(500px) rotateX(360deg);
}
</style>
</head>
<body>
<div class="box"></div>
<button>点我呀</button>
<script type="text/javascript">
var btn = document.querySelector('button');
var box = document.querySelector('.box');
btn.onclick = function(){
box.classList.add('current');
}
</script>
</body>
</html>

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

其它3D相关属性

1.透视:perspective:值

距离屏幕的多远看元素,实现近大远小的效果。

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

2.透视点 perspective-origin:值

最后看看到透视消失的地方,值可以是像素,也可以是百分比,还可以是方位名词,默认值是50%,50%(中心点)。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 155px;
height: 220px;
border: 1px solid #000;
margin: 100px auto;
/* 说明:透视值越小,透视效果越强,值越大,透视效果越弱,透视添加在父级身上 */
perspective: 1px;
perspective-origin: 50% 50%;
}
img{
transition: all 1s;
transform-origin: bottom;
}
.box:hover img{
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div class="box">
<img src="data:image/shu.jpg" alt="">
</div>
</body>
</html>

3.transform-style

规定被嵌套元素如何在3D空间中显示:flat是默认值,让子元素不保留其3D位置, preserve-3d 让子元素保留其3D位置 ,加在父亲身上.

小总结:透视 灭点 transform-style都是添加在父级身上,当元素发生3D翻转的时候,整个坐标系也跟着发生了翻转。

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
perspective: 900px;
}
.box{
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 100px auto;
perspective: 900px;
transform: rotateY(70deg);
transform-style: preserve-3d;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
margin: 50px auto;
transform: rotateX(45deg);
transform-origin: top;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>

动画 animation:值

animation属性有8个参数值:

  1. animation-name:自定义动画名
  2. animation-duration:动画的持续时间 单位是s或者ms
  3. animation-timing-function:动画的曲线
  4. animation-delay:动画从何时开始
  5. animation-iteration-count:控制动画执行的次数 没有单位, 一直执行:infinite
  6. aniamtion-direction:控制动画是否逆序播放 默认值normal 逆序:alternate
  7. animation-play-state:控制动画的播放和暂停 默认值是播放:running 暂停:paused
  8. animation-fill-mode:动画最后的停留位置 forwards 让动画停留在最后一帧

动画一定要先写animation 然后搭配@keyframes去写自定义的动画。 注意:animation和@keyframes最好都添加私有前缀。 示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
position: absolute;
left: 100px;
top: 100px;
background-color: pink;
/* -webkit-animation: feifei 2s linear 0s;
-moz-animation: feifei 2s linear 0s;
-ms-animation: feifei 2s linear 0s;
-o-animation: feifei 2s linear 0s; */
animation: feifei 2s linear 0s;
}
/* 单组动画 */
@keyframes feifei{
from{
width: 200px;
height: 200px;
transform: rotate(0deg);
}
to{
width: 400px;
height: 400px;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

如果使用@keyframes规定了多组动画规则,animation也可以同时添加这些组动画,之间只需要用‘,’隔开即可。

CSS3学习总结3-3D与动画的更多相关文章

  1. css3学习总结8--CSS3 3D转换

    3D 转换 1. rotateX() 2. rotateY() otateX() 方法 通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转. 示例: div { transform ...

  2. JS框架_(JQuery.js)绚丽的3D星空动画

    百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...

  3. CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

  4. css3之3D魔方动画(小白版)

      在这里分享一下3D魔方动画,html5+CSS3即可完成~无图无真相,先上效果图 第一步非常简单,就是先将魔方的结构画出来.大家都玩过魔方,知道魔方是一个有六个面的正方体.这里我们先写一个大的di ...

  5. CSS3与页面布局学习笔记(六)——CSS3新特性(阴影、动画、渐变、变形( transform)、透明、伪元素等)

    一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...

  6. CSS3新特性(阴影、动画、渐变、变形、伪元素等) CSS3与页面布局学习总结——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

      目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点 三.伪元素 3.1.before 3.2.after 3.3.清除浮动 四.圆角与边 ...

  7. 基于HTML5/CSS3可折叠的3D立方体动画

    今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真. 在线预览   源码下载 实现的代码 ...

  8. 【CSS3】3D立方体动画

    关于CSS3的3D立方体动画 知识点: 1.每个元素有独立的坐标系 2.坐标系随当前元素的改变而发生改变 3.立方体由静态transform参数构成 4.通过给容器添加动画使立方体运动 效果图: &l ...

  9. CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

  10. css3学习文档

    什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支 ...

随机推荐

  1. 转:Delphi 6 实用函数

    来自: daocaoren0824, 时间: -- ::, ID: 再给你一份 程序员实用函数 {▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎} {▎ ▎} {▎ 大 ...

  2. java运行时内存模式学习

    学习java运行时内存模式: 各区介绍: 方法区(线程共享):用于存放被虚拟机加载的类的元数据:静态变量,常量,以及编译和的代码(字节码),也称为永久代(所有该类的实例被回收,或者此类classLoa ...

  3. CentOS 7 学习笔记(二)systemd

    sysVinit启动原理在我们打开Linux电脑的电源后第一个启动的进程就是init.分配给init进程的PID是1.它是系统其他所有进程的父进程.当一台Linux电脑启动后,处理器会先在系统存储中查 ...

  4. Qt里怎么处理二进制数据

    Qt里有个专门的类QDataStream就是专门读写二进制数据的, 它与QByteArray搭配在网络编程中有奇效. 来个栗子: // write data QByteArray data; QDat ...

  5. 解决nginx中proxy_pass到tomcat的session丢失问题

    之前在配置tomcat的时候都是一个项目对应一个tomcat,也就是一个端口.最近需要把两个项目整合到同一个tomcat中,通过配置nginx让两个域名指向同一tomcat的不同项目.整合完毕后发现其 ...

  6. ceil 模块

    # 有时需要得到一个最小的整数,而这个数只能比自己大或相等,不能小于自己 #如: 2.1 我们需要得到的最小整数为3,即使后一位只有很小的一部分,一般用于分页 from math import cei ...

  7. Tomcat7安装配置 for Ubuntu

    一.环境说明: 操作系统:Ubuntu 12.04.2 LTS Tomcat:apache-tomcat-7.0.52 二.下载 下载地址:http://tomcat.apache.org/ 这里下载 ...

  8. java 过滤表情符号

    /** * 过滤表情符号 * @create by ldw on 2016-10-25 * @param str * @return str(去掉表情符号的字符串) * @version 1.0 * ...

  9. CICS的几个常用命令

    下面是CICS的几个常用命令,仅仅几个我也是刚刚使用CICS,慢慢积累. 1. cicscli /l 是查看启动的客户机守护程序,如果没有启动客户机守护程序,会提示如下信息:CCL8001I CICS ...

  10. mysql外键添加error1215

    在mysql创建表外键的过程中,由于操作不当,会提示cannot add foreign key constraint的错误. 造成此错误可能的原因如下: 1.数据类型不匹配,外键与其相关联的键必须数 ...