CSS3中的3D动画实现(钟摆、魔方)--实现代码

CSS3中的3D动画实现(钟摆、魔方)

transition-property 过渡动画属性  all|[attr]

  transition-duration 过渡时间

  transition-delay 延迟时间

  transition-timing-function 运动类型

    • ease:(逐渐变慢)默认值
    • linear:(匀速)
    • ease-in:(加速)
    • ease-out:(减速)
    • ease-in-out:(先加速后减速)
    • cubic-bezier 贝塞尔曲线( x1, y1, x2, y2 )

    http://cubic-bezier.com/

CSS3的2D变形----传统的transform变形效果

transform : translate、scale、rotate、skew…

translate:平移、scale:缩放、rotate:旋转、skew:倾斜

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<link rel="stylesheet" href="reset.css">
<style>
.box{
margin: 20px auto;
width: 200px;
height: 200px;
background: url("img/zf_cube1.png") no-repeat;
background-size: 100% 100%;
transform: translateX(100px) translateY(200px) rotate(45deg) scale(1.5);
/*
rotate(30deg):默认就是沿着垂直于屏幕方向的轴旋转的
rotateX:沿着X轴旋转
rotateY:沿着Y轴旋转
*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

CSS3的2D变形----实现钟摆效果(animation帧动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clock</title>
<link rel="stylesheet" href="reset.css">
<style>
.clockBox{
position: absolute;
top:50%;
left:50%;
margin:-150px 0 0 -60px;
width: 120px;
height: 300px;
background: url("img/clock.png") no-repeat;
background-size: 100% 100%;
}
.clockBox{
transform-origin: center top 0;
transform: rotate(-45deg);
animation:clockMove 1s linear infinite both;
/*
* animation-name:运动轨迹的名称(@keyframes设置运动轨迹)
* animation-duration:完成动画需要的总时间
* animation-timing-function:运动方式,默认值ease非匀速,linear匀速,ease-in加速,ease-out减速...
* animation-delay:延迟时间,默认时0s代表立即执行
* animation-iteration-count:动画执行的次数,默认是1代表执行一次就结束了,infinite是无限次运动
* animation-fill-mode:设置动画的状态
* none默认值:无任何特殊状态设置
* forwards:动画完成后会停留在最后一帧的位置,(默认动画执行完成会回退到起始位置)
* backwards:只有在动画有延迟时间的时候才有用,当动画在延迟时间内,让运动的元素在运动轨迹的第一帧位置等待
* both:同时具备以上两个效果
*/
}
@keyframes clockMove {
from,to{
transform: rotate(45deg);
}
50%{
transform: rotate(-45deg);
}
}
</style>
</head>
<body>
<div class="clockBox"></div>
</body>
</html>

CSS3的3D变形----实现3D变形效果的步骤和原理

perspective:定义3D元素距视图的距离

  none默认值,与设置零相同,不设置透视

  number 设置的具体指(单位px)

认知3D空间轴和3D变形效果

  translate(X|Y|Z)  rotate(X|Y|Z)......

transform-style:preserve-3d在3D空间中呈现被嵌套的元素

transform-origin:设置旋转的几点位置

  X轴:left center right length %

  Y轴:top center bottom length %

  Z轴:length

CSS3的3D变形----搭建3D魔方让其自动360度旋转

cube.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet/less" href="css/cube.less">
<script src="js/less.min.js"></script> </head>
<body>
<div class="main">
<ul class="cubeBox">
<li><img src="img/zf_cube1.png" alt=""></li>
<li><img src="img/zf_cube2.png" alt=""></li>
<li><img src="img/zf_cube3.png" alt=""></li>
<li><img src="img/zf_cube4.png" alt=""></li>
<li><img src="img/zf_cube5.png" alt=""></li>
<li><img src="img/zf_cube6.png" alt=""></li>
</ul>
</div>
</body>
</html>

cube.less

@import "reset.css";

html, body {
height: 100%;
overflow: hidden;
} .main {
position: absolute;
top: 50%;
left: 50%;
margin: -284px 0 0 -160px;
width: 320px;
height: 568px;
background: url("../img/zf_cubeBg.jpg") no-repeat;
background-size: cover; /*以背景图最适合的比例铺满整个屏幕:以后项目中凡是大容器或者整个页面的背景图大小最好都这样设置*/
} .cubeBox {
@v:;
position: absolute;
top: 50%;
left: 50%;
margin: -(unit(255/2,px)) 0 0 -(unit(255/2,px));
width: 255px;
height: 255px; li {
position: absolute;
top:;
left:;
width: 100%;
height: 100%; img {
display: block;
width: 100%;
height: 100%;
}
}
} /*--实现魔方--*/
@v-1: unit(255/2, px);
@v-2: unit(-255/2, px);
.main {
perspective: 2000px; .cubeBox {
transform-style: preserve-3d; //=为了可以看见效果,给魔方一个初始的旋转角度
transform: scale(0.6) rotateX(-30deg) rotateY(45deg); //=>自动360deg旋转
animation:cubeMove 5s linear infinite both; li {
//=>正反面
&:nth-child(1) {
transform: translateZ(@v-1);
}
&:nth-child(2) {
transform: translateZ(@v-2) rotateY(180deg);
}
//=>左右面
&:nth-child(3) {
transform: translateX(@v-2) rotateY(-90deg);
}
&:nth-child(4) {
transform: translateX(@v-1) rotateY(90deg);
}
//=>上下面
&:nth-child(5) {
transform: translateY(@v-2) rotateX(90deg);
}
&:nth-child(6) {
transform: translateY(@v-1) rotateX(-90deg);
}
}
}
} @keyframes cubeMove {
0%{
transform: translate(50px) scale(0.6) rotateY(30deg);
}
25%{
transform: translate(100px) scale(0.6) rotateY(270deg);
}
50%{
transform: translate(-50px) scale(0.6) rotateY(0deg);
}
75%{
transform: translate(100px) scale(0.6) rotateX(180deg);
}
100%{
transform: translate(50px) scale(0.6) rotateZ(120deg);
}
}
上一篇:css3中变形与动画(一)


下一篇:RPN网络