登录  /  注册
首页 > web前端 > css教程 > 正文

如何通过CSS3实现旋转立方体

清浅
发布: 2019-01-23 13:24:00
原创
7046人浏览过

主要通过css3中transform属性实现,首先给元素设置成3d元素,然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立方体效果

如今随着CSS3的不断成熟和发展,我们可以利用CSS3变换样式,translateZ,rotateX,rotateY,rotateZ,径向渐变,线性渐变,透视等属性创建一个可以旋转的3D立方体。接下来在文章中将为大家具体介绍如何通过CSS3实现这个旋转立方体效果。具有一定参考价值,希望对大家有所帮助

如何通过CSS3实现旋转立方体

【推荐课程:CSS3教程

在立方体内部是六个侧面,它们被定义为单独的图形元素,每个元素具有单独的“后”,“顶”,“底”,“左”,“右”和“前”。所以首先我们要创建html代码。包含这六个元素。如下代码所示

<div class="box">
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
		<div class="four"></div>
		<div class="five"></div>
		<div class="six"></div>
	</div>
登录后复制

然后设置box的CSS属性,以及将它设置为3D元素。在这里需要注意要设置定位,目的是让六个元素可叠加在一起

.box{
        position: relative;
        width:200px;
         height:200px;
         transform-style: preserve-3d;/*创造3D空间*/
       -webkit-transform-style: preserve-3d;
        transition: all 5s linear;
	}
登录后复制

接下来就要设置立方体的六个面

.box div{
	width:200px;
	height: 200px;
	position: absolute;
	left: 0;
       top: 0;
       transform-style: preserve-3d;
       -webkit-transform-style: preserve-3d;
       border: 1px solid #46B8DA;
       opacity: 0.5;
	}
登录后复制

六个面的公共部分设置完了,接下来就要设置这六个面的3d效果,我们可以通过transform 属性来设置3D变化,它可以允许我们对元素进行旋转,移动,倾斜等

           .one{
                transform: rotateY(0deg) translateZ(100px);
                background-color:rgb(255,118,19);
            }
            .two{
                transform: rotateY(180deg) translateZ(100px);
                 background-color:rgb(231,78,72);
            }
            .three{
                transform: rotateX(90deg) translateZ(100px);
                 background-color: rgb(75,165,165);
            }
            .four{
                transform: rotateX(-90deg) translateZ(100px);
                 background-color:rgb(129,182,62);
            }
            .five{
                transform: rotateY(90deg) translateZ(100px);
                background-color: rgb(255,118,19);
            }
            .six{
                transform: rotateY(-90deg) translateZ(100px);
                 background-color:rgb(244,208,114);
            }
登录后复制

这样我们的立方体就做好了,当鼠标移上去的时候就会发生旋转

.box:hover{
                transform: rotateX(360deg) rotateY(360deg);
                -webkit-transform: rotateX(360deg) rotateY(360deg);
            }
登录后复制

效果图:

GIF.gif

总结:以上就是本篇文章的全部内容了,希望通过这篇文章可以让大家学会如何通过CSS3实现旋转立方体

以上就是如何通过CSS3实现旋转立方体的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号