3D特效

最新推荐文章于 2019-04-16 18:35:06 发布

明天去哪

最新推荐文章于 2019-04-16 18:35:06 发布

阅读量377

点赞数

本文链接：https://blog.csdn.net/u014451076/article/details/50636388

版权

CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

注：近期学完canvas可能需要学习一下node.js的后台布置了．．．

１．transition：＜过渡属性名称＞＜过渡时间＞

　　注：(1)实际是一种合起来的写法，transition-property和transition-duration

　　 (2)transition存在第三个属性＜过渡模式＞，即transiton-timing-function

　　chrome safari 需要使用：-webkit-transition

firefox 需要使用：-moz-transition

opera 需要使用：-o-transition

存在５种过渡模式

　　ease linear ease-in ease-out ease-in-out

<span style="font-family:Microsoft YaHei;">举例：</span>
<!doctype html>
<html>
<head>
    <title>test</title>
    <style>
        #block{
            width:400px;
            height:400px;
            background: #69c;
            margin:0 auto;

            -webkit-transition: background 3s;
        }
        #block:hover{
            background:red;
        }
    </style>
</head>
<body>
    <div id="block">

    </div>
</body>
</html>

２．使用transform属性调整元素

需要使用 -webkit-transition-style:-webkit-preserve-3d;

　　 -webkit-perspective:800; //表示屏幕离观察的物体有800个像素的距离

　　　　　　 -webkit-perspective-origin:50% 50%; //表示从浏览器的正中心观察

　　translate:translateX,Y,Z　　//位移

rotate:rotateX,Y,Z　　//旋转

<span style="font-family:Microsoft YaHei;">举例：</span>
<!doctype html>
<html>
<head>
    <title>test</title>
    <style>
        #experiment{
            -webkit-perspective: 800;
            -webkit-perspective-origin: 50% 50%;
            -webkit-transform-style: -webkit-preserve-3d;

        }
        #block{
            width:500px;
            height:500px;
            background: #69c;
            margin:100px auto;

            -webkit-transform:rotateX(45deg);
        }
        #block:hover{
            background:red;
        }
    </style>
</head>
<body>
    <div id="experiment">
        <div id="block">

        </div>
    </div>
</body>
<html>

transform-origin属性调整旋转中心