H5+CSS3实现正方体效果

最新推荐文章于 2024-05-08 13:36:37 发布

王哈哈.

最新推荐文章于 2024-05-08 13:36:37 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/Yesterdayw/article/details/93392748

版权

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   .box{
            width: 250px;
            height: 250px;
            border: 1px dashed red;
            margin:100px auto;
            position: relative;
            border-radius: 50%;
            /*希望其自盒子保持3D效果*/
            transform-style:preserve-3d;
            /*animation: gun 18s linear infinite;*/
            transition: all 2s;
        }
        .box:hover{ transform:rotateX(7deg) rotateY(-25deg);}
         .box>div{
            width: 100%;
            height: 100%;
            position: absolute;
            left:0;
            top:0;
            text-align: center;
            line-height: 250px;
            font-size:100px;
            color:rgba(255,0,0,0.5);
            /*background-color: cadetblue;*/
        }
        /*六个面的效果*/
        .box .left{
            background-color: rgba(0,0,255,0.4);
            transform-origin: left;/*设置变形的中心点*/
            transform:rotateY(90deg) translateX(-125px);/*正数是向外旋转*/
        }
        .box .right{
            background-color: rgba(255,0,255,0.4);
            transform-origin: right;
            transform:rotateY(-90deg) translateX(125px);
        }
         .box .front{
            background-color: rgba(255,0,0,0.4);
            color:blue;
            transform:translateZ(125px);/*设置三维移动*/
        }
        .box .back{
            background-color: rgba(0,244,0,0.6);
            color:blue;
            transform:translateZ(-125px);
        }
        .box .top{
            background-color: rgba(0,255,255,0.6);
   
            transform:rotateX(90deg) translateZ(125px);
        }
        .box .bottom{
            background-color: rgba(255,255,0,0.6);
            
            transform:rotateX(90deg) translateZ(-125px);
        }
  </style>
 </head>
 <body>
  <div class="box">
   <div class="front">前</div>
   <div class="back">后</div>
   <div class="left">左</div>
   <div class="right">右</div>
   <div class="top">上</div>
   <div class="bottom">下</div>
  </div>
 </body>
</html>

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
《设置三维的效果》
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见

王哈哈.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5+CSS3实现正方体效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ width: 250px; height: 250px; ...
复制链接

扫一扫