为了账号安全,请及时绑定邮箱和手机立即绑定
关注
大蚊子1023

为什么么效果

为什么么效果

2016-10-25 源自:CSS3 3D 特效 2-2 366 浏览 2 回答

代码呢


2016-10-28
回复 0

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>3D 特效</title>
    <style type="text/css">
        *{ margin:0; padding; }/*transition-property:background-color;transition-duration:1s;transition-timing-function:ease;*/
        #block1{ width:400px; height:400px; background-color:#69c; margin:0 auto; transition: 2s; -webkit-transition: background-color 2s; -moz-transition:background-color 2s;}
        #block1:hover{ background-color: #F00; }
        #experiment{perspective:800px; perspective-origin:50% 50%; transform-style:preserve-3d;-webkit-perspective:800; -webkit-perspective-origin:50% 50%; -webkit-transform-style:preserve-3d;-moz-perspective:800; -moz-perspective-origin:50% 50%; -moz-transform-style:preserve-3d;}
        #block{ width:500px; height: 500px; background-color:#3333FF; margin:100px auto;
             transition: 2s}
            #block:hover{transform:rotateX(45deg);-webkit-transform:rotateX(45deg);-moz-transform:rotateX(45deg);}




    </style>
</head>

<body>
    <div id="block1"></div>
    <div id="experiment">
        <div id="block">
        </div>
    </div>
</body>
</html>

2017-05-05
回复 0

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信