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 动画实现 (钟摆, 魔方)-- 实现代码
来源: http://www.bubuko.com/infodetail-2722004.html