提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 怎样经由过程CSS3完成扭转立方体【css教程】,transform

重要经由过程CSS3中transform属性完成,起首给元素设置成3D元素,然后定义六个面的款式再经由过程transform属性对其举行扭转即可完成扭转立方体结果

现在跟着CSS3的不停成熟和生长,我们能够应用CSS3变更款式,translateZ,rotateX,rotateY,rotateZ,径向渐变,线性渐变,透视等属性建立一个能够扭转的3D立方体。接下来在文章中将为人人细致引见怎样经由过程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);
            }

结果图:

总结:以上就是本篇文章的全部内容了,愿望经由过程这篇文章能够让人人学会怎样经由过程CSS3完成扭转立方体

以上就是怎样经由过程CSS3完成扭转立方体的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"怎样经由过程CSS3完成扭转立方体【css教程】,transform"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线