3d转换(立方体旋转效果)

Css3d转换,立方体效果:

1, 重要的属性:perspective、translateY、preserve-3d、perspecctive-origin

2, rotateX()为正值绕x轴顺时针旋转,负值逆时针旋转;如奥运会体操单杠项目;

rotateY()为正值绕Y轴顺时针旋转,负值逆时针旋转;如钢管舞;

rotateZ()从视觉上看,rotateZ()让元素顺时针或逆时针运动;

3, translateZ():元素在Z轴位移,值越大时,元素离观看者越近,视觉上放大,反之变小

4, 格式:

舞台:(perspectiv)

容器:(3D,preserve-3d)

内容

第一步:先步好div的位置


第二步:对每一个平面进行旋转

.left{left:-152px;transform: rotateY(90deg);transform-origin: right;}
    .right{left:152px;transform: rotateY(-90deg);transform-origin: left;}
    .top{top:-152px;transform: rotateX(-90deg);transform-origin: bottom;}
    .bottom{top:152px;transform: rotateX(90deg);transform-origin: top;}
    .front{transform: translateZ(152px);z-index:2;}
    .back{z-index:1;}
第三步:实现对3D立方体的旋转
.container:hover{transform: rotateY(360deg)}

其余代码:

.stage{perspective: 800px;}
.container{width: 150px;height:150px;margin: 200px auto; position: relative;
            height:200px;transition:5s;transform-origin: center center 75px;transform-style: preserve-3d;backface-visibility: hidden;}
.container .side{position: absolute;width: 150px;height: 150px;border:2px solid #0033FF;text-align: center;line-height: 150px;}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值