CSS3学习总结3-3D与动画
前言:这是篇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个参数值:
- animation-name:自定义动画名
- animation-duration:动画的持续时间 单位是s或者ms
- animation-timing-function:动画的曲线
- animation-delay:动画从何时开始
- animation-iteration-count:控制动画执行的次数 没有单位, 一直执行:infinite
- aniamtion-direction:控制动画是否逆序播放 默认值normal 逆序:alternate
- animation-play-state:控制动画的播放和暂停 默认值是播放:running 暂停:paused
- 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与动画的更多相关文章
- css3学习总结8--CSS3 3D转换
3D 转换 1. rotateX() 2. rotateY() otateX() 方法 通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转. 示例: div { transform ...
- JS框架_(JQuery.js)绚丽的3D星空动画
百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...
- CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...
- css3之3D魔方动画(小白版)
在这里分享一下3D魔方动画,html5+CSS3即可完成~无图无真相,先上效果图 第一步非常简单,就是先将魔方的结构画出来.大家都玩过魔方,知道魔方是一个有六个面的正方体.这里我们先写一个大的di ...
- CSS3与页面布局学习笔记(六)——CSS3新特性(阴影、动画、渐变、变形( transform)、透明、伪元素等)
一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等) CSS3与页面布局学习总结——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点 三.伪元素 3.1.before 3.2.after 3.3.清除浮动 四.圆角与边 ...
- 基于HTML5/CSS3可折叠的3D立方体动画
今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真. 在线预览 源码下载 实现的代码 ...
- 【CSS3】3D立方体动画
关于CSS3的3D立方体动画 知识点: 1.每个元素有独立的坐标系 2.坐标系随当前元素的改变而发生改变 3.立方体由静态transform参数构成 4.通过给容器添加动画使立方体运动 效果图: &l ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- css3学习文档
什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支 ...
随机推荐
- 转:Delphi 6 实用函数
来自: daocaoren0824, 时间: -- ::, ID: 再给你一份 程序员实用函数 {▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎▎} {▎ ▎} {▎ 大 ...
- java运行时内存模式学习
学习java运行时内存模式: 各区介绍: 方法区(线程共享):用于存放被虚拟机加载的类的元数据:静态变量,常量,以及编译和的代码(字节码),也称为永久代(所有该类的实例被回收,或者此类classLoa ...
- CentOS 7 学习笔记(二)systemd
sysVinit启动原理在我们打开Linux电脑的电源后第一个启动的进程就是init.分配给init进程的PID是1.它是系统其他所有进程的父进程.当一台Linux电脑启动后,处理器会先在系统存储中查 ...
- Qt里怎么处理二进制数据
Qt里有个专门的类QDataStream就是专门读写二进制数据的, 它与QByteArray搭配在网络编程中有奇效. 来个栗子: // write data QByteArray data; QDat ...
- 解决nginx中proxy_pass到tomcat的session丢失问题
之前在配置tomcat的时候都是一个项目对应一个tomcat,也就是一个端口.最近需要把两个项目整合到同一个tomcat中,通过配置nginx让两个域名指向同一tomcat的不同项目.整合完毕后发现其 ...
- ceil 模块
# 有时需要得到一个最小的整数,而这个数只能比自己大或相等,不能小于自己 #如: 2.1 我们需要得到的最小整数为3,即使后一位只有很小的一部分,一般用于分页 from math import cei ...
- Tomcat7安装配置 for Ubuntu
一.环境说明: 操作系统:Ubuntu 12.04.2 LTS Tomcat:apache-tomcat-7.0.52 二.下载 下载地址:http://tomcat.apache.org/ 这里下载 ...
- java 过滤表情符号
/** * 过滤表情符号 * @create by ldw on 2016-10-25 * @param str * @return str(去掉表情符号的字符串) * @version 1.0 * ...
- CICS的几个常用命令
下面是CICS的几个常用命令,仅仅几个我也是刚刚使用CICS,慢慢积累. 1. cicscli /l 是查看启动的客户机守护程序,如果没有启动客户机守护程序,会提示如下信息:CCL8001I CICS ...
- mysql外键添加error1215
在mysql创建表外键的过程中,由于操作不当,会提示cannot add foreign key constraint的错误. 造成此错误可能的原因如下: 1.数据类型不匹配,外键与其相关联的键必须数 ...