首页 技术 正文

CSS3——3D效果

技术 2022年11月7日
0 收藏 975 点赞 887 浏览 12496 个字

1.效果1

CSS3——3D效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:100px;height:100px;padding:100px;border:5px solid #;margin:30px auto; -webkit-transform-style:preserve-3d;-webkit-perspective:100px;}
.div{width:100px;height:100px;background:Red; transition:1s;}
.box:hover .div{-webkit-transform:rotateX(180deg);}
</style>
</head>
<body>
<div class="box">
    <div class="div"></div>
</div>
</body>
</html>

2.效果2

CSS3——3D效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:100px;height:100px;padding:100px;border:5px solid #;margin:30px auto; -webkit-transform-style:preserve-3d;-webkit-perspective:100px;}
.div{width:100px;height:100px;background:Red; transition:1s;}
.box:hover .div{-webkit-transform:rotateY(180deg);}
</style>
</head>
<body>
<div class="box">
    <div class="div"></div>
</div>
</body>
</html>

3.效果3

CSS3——3D效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:100px;height:100px;padding:100px;border:5px solid #;margin:30px auto; -webkit-transform-style:preserve-3d;-webkit-perspective:200px;}
.div{width:100px;height:100px;background:Red; transition:1s;}
.box:hover .div{-webkit-transform:translateZ(-100px);}
</style>
</head>
<body>
<div class="box">
    <div class="div"></div>
</div>
</body>
</html>

4.效果4

CSS3——3D效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.wrap{width:100px;height:100px;padding:100px; border:5px solid #; margin:100px auto; -webkit-perspective:200px; -webkit-transform:scale();}
.box{width:100px;height:100px;background:red; position:relative; -webkit-transform-style:preserve-3d; transition:2s; -webkit-transform-origin:center center -50px;}
.box div{width:100px;height:100px; position:absolute; color:#fff;font-size:50px; text-align:center;line-height:100px;}
.box div:nth-of-type(){left:;top:-100px;background:#9C0; -webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg);}
.box div:nth-of-type(){left:-100px;top:0px;background:#CF3; -webkit-transform-origin:right; -webkit-transform:rotateY(-90deg);}
.box div:nth-of-type(){left:0px;top:0px;background:#CCF;}
.box div:nth-of-type(){left:100px;top:;background:#0C9;-webkit-transform-origin:left;-webkit-transform:rotateY(90deg);}
.box div:nth-of-type(){left:0px;top:100px;background:#69C;-webkit-transform-origin:top;-webkit-transform:rotateX(-90deg);}
.box div:nth-of-type(){left:;top:;background:#F0C;-webkit-transform:translateZ(-100px) rotateX(180deg);}
.wrap:hover .box{ -webkit-transform:rotateX(180deg);}
</style>
</head>
<body>
<div class="wrap">
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
</body>
</html>

幻灯片效果

CSS3——3D效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style id="css">
body,ul,ol{margin:;padding:;}
li{ list-style:none;}
.wrap{width:800px;margin:100px auto ;}
#picList{width:800px;height:360px; -webkit-perspective:800px; }
#picList li{width:50px;height:360px; position:relative; -webkit-transform-style:preserve-3d; -webkit-transform-origin:center center -180px;float:left;}
#picList a{width:%;height:%; position:absolute;left:;top:;}
#picList li a:nth-of-type(){ background:url(3d幻灯片/.jpg) no-repeat; }
#picList li a:nth-of-type(){ background:url(3d幻灯片/.jpg) no-repeat; top:-360px; -webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg)}
#picList li a:nth-of-type(){ background:url(3d幻灯片/.jpg) no-repeat; -webkit-transform:translateZ(-360px) rotateX(180deg);}
#picList li a:nth-of-type(){ background:url(3d幻灯片/.jpg) no-repeat; -webkit-transform-origin:top; -webkit-transform:rotateX(-90deg); top:360px;}
#picList li span{ position:absolute;width:360px;height:360px;background:#;}
#picList li span:nth-of-type(){ -webkit-transform-origin:left; -webkit-transform:rotateY(90deg);left:;}
#picList li span:nth-of-type(){ -webkit-transform-origin:right; -webkit-transform:rotateY(-90deg);right:;}#btns{float:right; padding:10px ;}
#btns li{width:40px;height:40px;background:#;color:#fff; border-radius:%; font:italic 30px/40px Arial;float:left;margin: 5px; text-align:center; cursor:pointer;}
#btns .active{ background:#f60;}</style>
<script>
window.onload=function()
{
    var oPicList=document.getElementById("picList");
    var oCss=document.getElementById("css");
    var aBtns=document.getElementById("btns").getElementsByTagName("li");
    var aLi=null;
    var sLi="";
    var sCss="";
    var iLiw=;
    var iZindex=;
    var iNow=;
    var iLength=oPicList.clientWidth/iLiw;
    for(var i=;i<iLength;i++)
    {
        i>iLength/?iZindex--:iZindex++;
        sLi+='<li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></a><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></a><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></a><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></a><span></span><span></span></li>';
        sCss+="#picList li:nth-of-type("+(i+)+") a{ background-position:-"+i*iLiw+"px 0;}";
        sCss+="#picList li:nth-of-type("+(i+)+"){z-index:"+iZindex+"}";    }
    oPicList.innerHTML=sLi;
    oCss.innerHTML+=sCss;
    aLi=oPicList.children;
    for(var i=;i<aBtns.length;i++)
    {
        (function(a){
            aBtns[a].onclick=function()
            {
                for(var i=;i<aLi.length;i++)
                {
                    aLi[i].style.transition="0.5s "+i*+"ms";
                    aLi[i].style.WebkitTransform="rotateX(-"+a*+"deg)";
                }
                this.className="active";
                aBtns[iNow].className="";
                iNow=a;
            };
        })(i)
    }
};
</script>
</head>
<body>
<div class="wrap">
    <ul id="picList">    </ul>
    <ol id="btns">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>
</body>
</html>

CSS3——3D效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
@-webkit-keyframes move
{
    %
    {
        width:1000px;
    }
}
@-moz-keyframes move
{
    %
    {
        width:1000px;
    }
}
@keyframes move
{
    %
    {
        width:1000px;
    }
}
.box{width:100px;height:100px;background:red; -webkit-animation:2s move;
-moz-animation:2s move;animation:2s move;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

CSS3——3D效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
@-webkit-keyframes move
{
    %{
        left:;
    }
    %
    {
        left:-500px;
    }
}
#wrap{ width:500px;height:100px;border:1px solid #; position:relative;margin:100px auto; overflow:hidden;}
#list{ position:absolute;left:;top:;margin:;padding:; -webkit-animation:3s move infinite linear; width:%;}
#list li{ list-style:none;width:98px;height:98px;border:1px solid #fff;background:#; color:#fff; font:50px/98px Arial; text-align:center; float:left;}
#wrap:hover #list{ -webkit-animation-play-state:paused;}
</style>
</head>
<body>
<div id="wrap">
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

CSS3——3D效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
@-webkit-keyframes domove
{
    %
    {
        top:;left:;
    }
    %
    {
        top:;left:300px;
    }
    %
    {
        top:300px;left:300px;
    }
    %
    {
        top:300px;left:0px;
    }
    %
    {
        top:;left:;
    }
}
#wrap{width:400px;height:400px;border:1px solid #; position:relative; border:5px solid #;}
.box{width:100px;height:100px;background:red; position:absolute;left:;top:; -webkit-animation:4s domove infinite linear alternate;}
</style>
</head>
<body>
<div id="wrap">
<div class="box"></div>
</div>
</body>
</html>

折纸布局

CSS3——3D效果‘

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#wrap{ width:500px;margin: auto; -webkit-perspective:800px; -webkit-transform-style:preserve-3d;}
#wrap div{ height:100px;border:1px solid #;background:#ccc;}
#wrap div:nth-of-type(){ -webkit-transform-origin:bottom; -webkit-transform:rotateX(45deg);}
#wrap div:nth-of-type(){ -webkit-transform-origin:top; -webkit-transform:rotateX(-45deg);}
#wrap div:nth-of-type(){ -webkit-transform-origin:top; -webkit-transform:rotateX(45deg);}
</style>
</head>
<body>
<div id="wrap">
    <div></div>
    <div></div>
    <div style="height:auto;">
    <div></div>
    </div>
</div>
</body>
</html>

CSS3——3D效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#wrap{ width:500px;margin: auto; -webkit-perspective:800px; -webkit-transform-style:preserve-3d; position:relative;}
#wrap div{position:absolute;top:102px;left:;width:500px; -webkit-transform-origin:top;-webkit-transform-style:preserve-3d;}
#wrap span{height:100px;border:1px solid #;background:#ccc; display:block;}
#wrap>div:nth-of-type(){top:;}
</style>
</head>
<body>
<div id="wrap">
    <div style="-webkit-transform:rotateX(-45deg);">
        <span></span>
        <div style="-webkit-transform:rotateX(90deg);">
            <span></span>
            <div style="-webkit-transform:rotateX(-90deg);">
                <span></span>
                <div style="-webkit-transform:rotateX(90deg);">
                    <span></span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

CSS3——3D效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
@-webkit-keyframes open
{
    %
    {
        -webkit-transform:rotateX(-120deg);
    }
    %
    {
        -webkit-transform:rotateX(30deg);
    }
    %
    {
        -webkit-transform:rotateX(-15deg);
    }
    %
    {
        -webkit-transform:rotateX(8deg);
    }
    %
    {
        -webkit-transform:rotateX(0deg);
    }
}
@-webkit-keyframes clos
{
    %
    {
        -webkit-transform:rotateX(0deg);
    }
    %
    {
        -webkit-transform:rotateX(-120deg);
    }
}
body{margin:;}
#wrap{ width:160px;margin:30px auto; position:relative; -webkit-perspective:800px;}
#wrap h2{ height:40px;background:#F60; color:#fff; font: bold 16px/40px "微软雅黑"; text-align:center;margin:; position:relative;z-index:;}
#wrap div{ position:absolute;top:32px; width:%;left:; -webkit-transform-style:preserve-3d; -webkit-transform-origin:top;-webkit-transform:rotateX(-120deg);}
#wrap span{ display:block;height:30px;background:#9F0; font:12px/30px "宋体"; color:#fff; text-indent:20px; box-shadow:inset    20px rgba(,,,); transition:1s;}
#wrap>div{top:40px;}
#wrap .show{-webkit-animation:2s open;-webkit-transform:rotateX(0deg);}
#wrap .hide{-webkit-animation:.8s clos;-webkit-transform:rotateX(-120deg);}
#wrap .show>span{ box-shadow:inset    20px rgba(,,,);}
#btn{ position:absolute;}
</style>
</head>
<body>
<input type="button" value="按钮" id="btn" />
<div id="wrap">
    <h2>我是标题奥</h2>
    <div>
        <span>选项1</span>
        <div>
            <span>选项2</span>
            <div>
                <span>选项3</span>
                <div>
                    <span>选项4</span>
                    <div>
                        <span>选项5</span>
                        <div>
                            <span>选项6</span>
                            <div style="">
                                <span>选项7</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
var oBtn=document.getElementById("btn");
var oWrap=document.getElementById("wrap");
var aDiv=oWrap.getElementsByTagName("div");
var iDelay=;
var oTimer=null;
var i=;
var bOff=true;
oBtn.onclick=function()
{
    if(oTimer)
    {
        return;
    }
    if(bOff)
    {
        i=;
        oTimer=setInterval(function(){
            aDiv[i].className="show";
            i++;
            if(i==aDiv.length)
            {
                clearInterval(oTimer);
                oTimer=null;
                bOff=false;
            }
        },iDelay);
    }
    else
    {
        i=aDiv.length-;
        oTimer=setInterval(function(){
            aDiv[i].className="hide";
            i--;
            if(i<)
            {
                clearInterval(oTimer);
                bOff=true;
                oTimer=null;
            }
        },iDelay);
    }
};
</script>
</body>
</html>

CSS3——3D效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
@-webkit-keyframes open{
    %
    {
        -webkit-transform:rotateX(-120deg);
    }
    %
    {
        -webkit-transform:rotateX(30deg);
    }
    %
    {
        -webkit-transform:rotateX(-15deg);
    }
    %
    {
        -webkit-transform:rotateX(8deg);
        box-shadow:inset     #ccc;
    }
    %
    {
        -webkit-transform:rotateX(0deg);
    }
}
@-webkit-keyframes clos
{
    %
    {
        -webkit-transform:rotateX(0deg);
    }
    %
    {
        -webkit-transform:rotateX(-120deg);
    }
}
.wrap{width:240px; position:relative; -webkit-perspective:800px; margin: auto;}
.wrap h3{ margin:;height:40px;background:#f60; color:#fff; line-height:40px; text-align:center; font-size:16px; position:relative; z-index:;}
.wrap div{ position:absolute;top:30px;left:; -webkit-transform-style:preserve-3d; width:%; -webkit-transform-origin:top; -webkit-transform:rotateX(-120deg); z-index:;}
.wrap>div:nth-of-type(){top:40px;}
.wrap span{ display:block;height:28px;background:#CF3; color:#fff; font:14px/28px "宋体"; text-indent:20px; box-shadow:inset   100px 20px rgba(,,,); transition:1s;}
.wrap .open{-webkit-transform:rotateX(0deg); -webkit-animation:.5s open ease-in;}
.wrap .open>span{box-shadow:inset   100px 20px rgba(,,,);}
.wrap .clos{-webkit-transform:rotateX(-120deg); -webkit-animation:.7s clos ease;}
.wrap .clos>span{box-shadow:inset   100px 20px rgba(,,,);}
#btn{ position:absolute;left:;top:; width:100px;height:30px; transition:1s;}
</style>
<script>
window.onload=function()
{
    var oBtn=document.getElementById("btn");
    var oWrap=document.getElementById("wrap");
    var aDiv=oWrap.getElementsByTagName("div");
    var i=;
    var oTimer=null;
    var iDelay=;
    var Boff=true;
    oBtn.onclick=function()
    {
        oBtn.style.left="-300px";
        if(Boff)
        {
            i=;
            oTimer=setInterval(function(){
                    aDiv[i].className="open";
                    if(i==aDiv.length-)
                    {
                        clearInterval(oTimer);
                        oBtn.style.left="0px";
                        oBtn.value="关闭";
                    }
                    i++;
            },iDelay);
        }
        else
        {
            i=aDiv.length-;
            oTimer=setInterval(function(){
                    aDiv[i].className="clos";
                    if(i==)
                    {
                        clearInterval(oTimer);
                        oBtn.style.left="0px";
                        oBtn.value="展开";
                    }
                    i--;
            },);
        }
        Boff=!Boff;
    };};
</script>
</head>
<body>
<input type="button" value="展开" id="btn" />
<div class="wrap" id="wrap">
    <h3>这是标题</h3>
    <div>
        <span>选项1</span>
        <div>
            <span>选项2</span>
            <div>
                <span>选项3</span>
                <div>
                    <span>选项4</span>
                    <div>
                        <span>选项5</span>
                        <div>
                            <span>选项6</span>
                            <div>
                                <span>选项7</span>
                                <div>
                                    <span>选项8</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
点赞 975

贡献者

上一篇： MongoDB 客户端 MongoVue
下一篇： 由“js跨域”想到"AJAX也不一定要XMLHttpRequest"
相关推荐
python开发_常用的python模块及安装方法
python开发_常用的python模块及安装方法
adodb：我们领导推荐的数据库连接组件bsddb3：BerkeleyDB的连接组件Cheetah-1.0：我比较喜欢这个版本的cheeta…
技术
日期：2022-11-24 点赞：878 阅读：9,077
Educational Codeforces Round 11 C. Hard Process 二分
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接：http://www.codeforces.com/contest/660/problem/CDes…
技术
日期：2022-11-24 点赞：807 阅读：5,552
下载Ubuntn 17.04 内核源代码
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
技术
日期：2022-11-24 点赞：569 阅读：6,401
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
技术
日期：2022-11-24 点赞：733 阅读：6,176
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式，并且由于涉及到要把拍到的照片显…
技术
日期：2022-11-24 点赞：512 阅读：7,813
Struts的使用
Struts的使用
一、Struts2的获取　　Struts的官方网站为：http://struts.apache.org/　　下载完Struts2的jar包,…
技术
日期：2022-11-24 点赞：671 阅读：4,896
Lomu

贡献者

这家伙很懒，只想把你留下。

文章
104
收藏
0
人气
338,286
粉丝
进主页
文章展示
  • [ 技术 ] python开发_常用的python模块及安装方法
  • [ 技术 ] Educational Codeforces Round 11 C. Hard Process 二分
  • [ 技术 ] 下载Ubuntn 17.04 内核源代码
  • [ 技术 ] 可用Active Desktop Calendar V7.86 注册码序列号
  • [ 技术 ] Android调用系统相机、自定义相机、处理大图片
  • [ 技术 ] Struts的使用
    • 个人收藏笔记记录
    我的笔记
    首页 首页 菜单 首页 首页