找回密码
当前位置：前端开发者 > CSS > 正文

前端CSS3制作正方体

2018-10-04 分类：CSS 阅读(1031) 评论(0)

前端开发日常工作流程 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前端开发工程师 岗位职责

赞(0)
前端开发者 » 前端CSS3制作正方体
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论