前端CSS3制作正方体

前端开发日常工作流程 web前端开发师工作注意事项 前端开发是做那些工作

2D变换
transform 主要函数属性

rotate() 旋转函数 取值度数
deg 度数
Transform-origin 旋转的基点
skew() 倾斜函数 取值度数
skewX(deg)
skewY(deg)
scale() 缩放函数 取值 正数、负数和小数
scaleX()
scaleY()
translate() 位移函数
translateX()
translateY()
transform-origin:变换基点: 关键字(top/left/right/bottom)或坐标值,默认: 0, 0
transform 执行顺序问题 — 后写先执行

3d变换
transform-style:preserve-3d 建立3D空间
perspective 景深
perspective- origin 景深基点(视线的角度)
transform 新增函数
rotateX()
rotateY()
rotateZ()
translateZ()
scaleZ()

animation
关键帧——keyFrames
类似于flash
只需指明两个状态,之间的过程由计算机自动计算
关键帧的时间单位
数字:0%、25%、100%等
字符:from(0%)、to(100%)
格式
@keyframes 动画名称
{
动画状态
}
@keyframes miaov_test
{
from { background:red; }
to { background:green; }
}

代码片段 1

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Document</title>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        .body {
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
        }
        .warp {
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -webkit-perspective: 5500;
            -moz-perspective: 5500;
            position: relative;
            height: 200px;
            width: 200px;
            margin: 300px auto;
            -webkit-animation: rot 6s linear infinite;
            -moz-animation: rot 6s linear infinite;
        }
        div {
            text-align: center;
            font-size: 30px;
        }
        .before {
            background: #00ffff;
            width: 200px;
            height: 200px;
            position: absolute;
            -webkit-transform: translateZ(200px);
            -moz-transform: translateZ(200px);
            -webkit-transform-origin: bottom;
            -moz-transform-origin: bottom;
            opacity: 0.3;
        }
        .after {
            background: #d2691e;
            width: 200px;
            height: 200px;
            position: absolute;
            opacity: 0.7;
        }
        .top {
            background: #483d8b;
            width: 200px;
            height: 200px;
            position: absolute;
            -webkit-transform: rotateX(90deg);
            -moz-transform: rotateX(90deg);
            -webkit-transform-origin: top;
            -moz-transform-origin: top;
            opacity: 0.7;
        }
        .bottom {
            background: #228b22;
            width: 200px;
            height: 200px;
            position: absolute;
            -webkit-transform: rotateX(-90deg);
            -moz-transform: rotateX(-90deg);
            -webkit-transform-origin: bottom;
            -moz-transform-origin: bottom;
            opacity: 0.7;
        }
        .left {
            background: #adff2f;
            width: 200px;
            height: 200px;
            position: absolute;
            -webkit-transform: rotateY(-90deg);
            -moz-transform: rotateY(-90deg);
            -webkit-transform-origin: left;
            -moz-transform-origin: left;
            opacity: 0.7;
        }
        .right {
            background: #7b68ee;
            width: 200px;
            height: 200px;
            position: absolute;
            -webkit-transform: rotatey(90deg);
            -moz-transform: rotatey(90deg);
            -webkit-transform-origin: right;
            -moz-transform-origin: right;
            opacity: 0.7;
        }
        @-webkit-keyframes ‘rot’ {
            0% {
                -webkit-transform: rotateY(0deg) rotateX(0deg);
                -moz-transform: rotateY(0deg) rotateX(0deg);
            }
            100% {
                -webkit-transform: rotateY(360deg) rotateX(360deg);
                -moz-transform: rotateY(360deg) rotateX(360deg);
            }
        }
        }
    </style>
</head>
<body>
    <div class=”warp”>
        <div class=”before”>before</div>
        <div class=”after”>after</div>
        <div class=”top”>top</div>
        <div class=”bottom”>bottom</div>
        <div class=”left”>left</div>
        <div class=”right”>right</div>
    </div>
</body>
</html>

后面用自己很菜的animation,试试做了动画效果。360、谷歌、欧朋都可以运行,其它倒没试过。

position定位 web前端开发工程师 前端开发和安卓开发工程师 web前端开发工程师 岗位职责

» 本文来自:前端开发者 » 《前端CSS3制作正方体》
» 本文链接地址:https://www.rokub.com/6021.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!