3D魔方代码

3D魔方代码-天威侠客|小天爱分享项目学习网
3D魔方代码
此内容为付费阅读,请付费后查看
1
立即购买
您当前未登录!建议登陆后购买,可保存购买订单
付费阅读
天威侠客工作室,学无止境
<!--3D魔方动画特效 start-->
<style>
.box3d {
	float:right;
	width:100px;
	height:100px;
	position:fixed;
	left:35px;
	bottom:10px;
	-webkit-transform-style:preserve-3d;
	-webkit-transform:rotateX(13deg);
	-webkit-animation:move3d 5s linear infinite;
}
.minbox {
	width:100px;
	height:100px;
	position:absolute;
	right:0;
	bottom:0;
	-webkit-transform-style:preserve-3d;
}
.minbox li {
	width:100px;
	height:100px;
	position:absolute;
	left:0;
	top:0;
}
.minbox li:nth-child(1) {
	background:url(/wp-content/themes/jizhi-chlid/images/3d/3d_1.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2) {
	background:url(/wp-content/themes/jizhi-chlid/images/3d/3d_2.png) no-repeat 0 0;
	-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3) {
	background:url(/wp-content/themes/jizhi-chlid/images/3d/3d_3.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4) {
	background:url(/wp-content/themes/jizhi-chlid/images/3d/3d_4.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5) {
	background:url(/wp-content/themes/jizhi-chlid/images/3d/3d_5.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6) {
	background:url(/wp-content/themes/jizhi-chlid/images/3d/3d_6.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.box:hover ol li:nth-child(1) {
	-webkit-transform:translateZ(300px);
}
.box:hover ol li:nth-child(2) {
	-webkit-transform:rotateX(180deg) translateZ(300px);
}
.box:hover ol li:nth-child(3) {
	-webkit-transform:rotateX(-90deg) translateZ(300px);
}
.box:hover ol li:nth-child(4) {
	-webkit-transform:rotateX(90deg) translateZ(300px);
}
.box:hover ol li:nth-child(5) {
	-webkit-transform:rotateY(-90deg) translateZ(300px);
}
.box:hover ol li:nth-child(6) {
	-webkit-transform:rotateY(90deg) translateZ(300px);
}
/*自定义一个名称为move3d,以免影响其他动画*/
@keyframes move3d{
	0%{
		-webkit-transform: rotateX(13deg) rotateY(0deg);
	}
	100%{
		-webkit-transform:rotateX(13deg) rotateY(360deg);
	}
}
.url_3d{display:block;width:100px;height:100px;}
</style>
<div class="box3d">
	<ul class="minbox">
		<li><a class="url_3d click-pc-boke" href="javascript:void(0);" title="天威博客"></a></li>
		<li><a class="url_3d click-pc-boke" href="javascript:void(0);" title="游戏社区"></a></li>
		<li><a class="url_3d click-pc-boke" href="javascript:void(0);" title="技术交流"></a></li>
		<li><a class="url_3d click-pc-boke" href="javascript:void(0);" title="悬赏问答"></a></li>
		<li><a class="url_3d click-pc-boke" href="javascript:void(0);" title="免费资源"></a></li>
		<li><a class="url_3d click-pc-boke" href="javascript:void(0);" title="37boke.com"></a></li>
	</ul>
</div>
<script type="text/javascript">
    //社区博客
    $(".click-pc-boke").on("click",function(e) {
        /*获取当前站点的cookie*/
        var login_key = "";
        //模拟表单post提交,并打开新窗口
        pc_formpost("https://www.37boke.com",{'login_key' :login_key});
    });
    /**
     *模拟form表单,实现post提交,并打开新窗口
     * url:请求链接
     * postData:json格式的post参数
     */
    function pc_formpost(url, postData) { 
    	var tempform = document.createElement("form");
        tempform.action = url;      
        tempform.target = "_blank";
        tempform.method = "post";      
        tempform.style.display = "none"; 
    	for (var x in postData) { 
    		var opt = document.createElement("textarea"); 
    		opt.name = x;      
            opt.value = postData[x];      
            tempform.appendChild(opt);      
        }      
        document.body.appendChild(tempform);
        tempform.submit();     
    }
 </script>
<!--3D魔方动画特效 end-->
努力专研,刻意学习 一直喜欢
© 版权声明
THE END
喜欢就支持一下天威吧
点赞6赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容