CSS3中的3D动画实现(钟摆、魔方)
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: 255; ?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: 0; ???left: 0; ???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中的3D动画实现(钟摆、魔方)--实现代码
原文地址：https://www.cnblogs.com/CCxi/p/9454503.html