纯CSS3制作正方体

本文介绍了如何利用CSS3的3D转换特性来制作3D正方体。通过理解rotateX, rotateY和rotateZ函数,结合设置不同角度,可以创建出逼真的正方体效果。文章提供了完整的制作过程及代码示例,为进一步添加动画效果打下基础。" 74906050,6838957,MyBatis入门教程:不使用接口的HelloWorld实践,"['MyBatis', '数据库操作', 'Java开发', '持久层框架']
摘要由CSDN通过智能技术生成

CSS3 3D 转换

3D 转换

CSS3 允许您使用 3D 转换来对元素进行格式化。
rotateX() x轴旋转,围绕其在一个给定度数X轴旋转的元素。

div
{
   
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}

rotateY() y轴旋转,围绕其在一个给定度数Y轴旋转的元素。

div
{
   
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}

rotateZ()z轴旋转,围绕其在一个给定度数Z轴旋转的元素。

div
{
   
    transform: rotateZ(130deg);
    -webkit-transform: rotateZ(130deg); /* Safari 与 Chrome */
}

3D正方体

掌握好rotateX,rotateY,rotateZ后,我们就能做出许许多多的3D效果
下面,我们就开始制作正方体
在这里插入图片描述
正方体,由6个面组成,所以线设置6个div

<div class="big">
        <div class="t1">
        </div>
        <div class="t2">
        </div>
        <div class="t3">
        </div>
        <div class="t4">
        </div>
        <div class="t5">
        </div>
        <div class="t6">
        </div>
    </div>

再给最外层div设置3d效果

.big {
   
            position: absolute;
            top: 50%;
            left: 50%;
            transform: rotateY(120deg) rotateX(120deg); //旋转一定角度,让其3d效果看起来更明显
            transform-style: preserve-3d;
        }

给6个面设置共同样式

.big>.t1,
        .t2,
        
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值