电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

利用CSS代码做到立方体360度摆动效果实例简介

2021-01-27 23:12:57 出处:[ 菜菜电脑网 ] 人气:次阅读
这篇文章通过实例代码给大家参考了利用CSS构建立方体360度摆动效果的方法,付诸后的效果非常炫酷,而且借助的代码非常简单,对大家的了解和研习很有为了让,有并不需要的朋友们下面来一起忘了吧。

静态效果图如下:

示例代码:

代码如下:

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        * { margin: 0; padding: 0}        ul {list-style: none;}        ul {            width: 200px;            height: 200px;            margin: 200px auto;            position: relative;            transition: all 6s;            /*6秒时间彻底改变*/            transform-style: preserve-3d;            /*放到父盒子内*/        }        ul li {            width: 100%;            height: 100%;            position: absolute;            text-align: center;            line-height: 200px;            font-size: 40px;            color: #fff;        }        li:nth-child(1){            transform: rotateX(0deg) translateZ(100px);            /*translateZ是为了让立方体显现出形状*/            background-color: rgba(255, 0, 0, 0.6);        }        li:nth-child(2){            transform: rotateX(-90deg) translateZ(100px);            background-color: rgba( 0, 255,0, 0.6);        }        li:nth-child(3){            transform: rotateX(-180deg) translateZ(100px);            background-color: rgba(0,0,255,0.5);        }        li:nth-child(4){            transform: rotateX(-270deg) translateZ(100px);            background-color: rgba(50,50,25,0.5);        }        li:nth-child(5){            transform: rotateY(-90deg) translateZ(100px);            background-color: rgba(255,0,255,0.5);        }        li:nth-child(6){            transform: rotateY(90deg) translateZ(100px);            background-color: rgba(0,255,255,0.5);        }        ul:hover{            transform :rotateX(360deg) rotateY(360deg);        }    </style></head><body><ul>    <li>第1个盒子</li>    <li>第2个盒子</li>    <li>第3个盒子</li>    <li>第4个盒子</li>    <li>第5个盒子</li>    <li>第6个盒子</li></ul></body></html>

以上就是利用CSS代码充分利用立方体360度转动效果实例演示的详述内容,更多问追捧php中文网其它关的文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152