css3之3d变形transform - 立方体效果

最新推荐文章于 2024-04-08 10:29:42 发布
最新推荐文章于 2024-04-08 10:29:42 发布
阅读量520 收藏 1
点赞数
原文链接：http://www.cnblogs.com/July-/p/5830558.html
版权

 

 1. 立方体的上下：

        .cubeBottom{

            transform: rotateX(90deg) ;
            transform-origin:center bottom  ; /* :绕x旋转，主要确定y的高度 ： right bottom , 1px  300px, 2px  300px,.. 100px 300px .. */
        }

　　 2. 立方体的左右：

        .cubeLeft{
            transform: rotateY(90deg) ;
            transform-origin:left center  ; /* :绕Y旋转，主要确定x  ： left bottom , left  300px, 0  300px,..0 500px .. */
        }

 3. 立方体的前后：

　　

     .cubeFront{
            transform:translateZ(0px);
        }
        .cubeBack{
            transform:translateZ(-300px);
        }

　　

 

 4 立方体实现：注意

/*  透视中心和透视距离*/
perspective-origin:  0 1000px ;
perspective: 2000px;
/*  效果： 平面还是3d立体 */
transform-style: preserve-3d;



源代码： 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>3d </title>
    <style>
        .con{ position: relative;
            width: 80%;
            height: 900px;
            margin: 0 auto;
            perspective-origin:  0 1000px ;
            perspective: 2000px;

        }
        .cubeBox{position: relative;
            width: 300px;
            height: 300px;
            margin: 0 auto;
            /* 效果： 平面还是3d立体 */
            transform-style: preserve-3d;
        }
        .cube{ position:absolute  ;
            left: 50%;
            margin-left: -151px;
            width: 300px;
            height: 300px;
            line-height: 300px;
            border: 1px dotted black;
            text-indent:-9999px ;
            font-size: 56px;
            text-align: center;

        }
        .cube{
            backface-visibility: visible;

        }
        .cubeBottom{

            transform: rotateX(90deg) ;
            transform-origin:center bottom  ; /* :绕x旋转，主要确定y的高度 ： right bottom , 1px  300px, 2px  300px,.. 100px 300px .. */
        }
        .cubeTop{
            transform: rotateX(-90deg) ;
            transform-origin:center top ;/* :绕x旋转，主要确定y的高度 ：right top , center top ,1px 0px, 2px  0px,.. 100px 0px .. */
        }
        .cubeLeft{
            transform: rotateY(90deg) ;
            transform-origin:left center  ; /* :绕Y旋转，主要确定x  ： left bottom , left  300px, 0  300px,..0 500px .. */
        }
        .cubeRight{
            transform: rotateY(-90deg) ;
            transform-origin:right center ;/* :绕Y旋转，主要确定x ：right top , right 0 ,300px 100px, 300px  200px,.. 300px 0px .. */
        }


        .cubeFront{
            transform:translateZ(0px);
        }
        .cubeBack{
            transform:translateZ(-300px);
        }
    </style>
</head>
<body>
<div class="con">
    <div class="cubeBox">
        <div class="cube cubeBack">back</div>
        <div class="cube cubeBottom">Bottom</div>
        <div class="cube cubeTop">Top</div>
        <div class="cube cubeLeft">Left</div>
        <div class="cube cubeRight">Right</div>
        <div class="cube cubeFront">front</div>
    </div>

</div>

</body>
</html>

　　

 

　5 立方体实现-动画实现立方体   

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>3d </title>
    <style>
        .con{ position: relative;
            width: 80%;
            height: 900px;
            margin: 0 auto;
            perspective-origin:  0 1000px ;
            perspective: 2000px;

        }
        .cubeBox{position: relative;
            width: 300px;
            height: 300px;
            margin: 0 auto;
            /* 效果： 平面还是3d立体 */
            transform-style: preserve-3d;
        }
        .cube{ position:absolute  ;
            left: 50%;
            margin-left: -151px;
            width: 300px;
            height: 300px;
            line-height: 300px;
            border: 1px dotted black;
            text-indent:-9999px ;
            font-size: 56px;
            text-align: center;

        }
        .cube{
            backface-visibility: visible;

        }
        .cubeBottom{
            animation: KF_cubeBottom 2s  ease 1s both  ;
            transform-origin:center bottom  ; /* :绕x旋转，确定y的高度 ： right bottom , 1px  300px, 2px  300px,.. 100px 300px .. */
        }
        .cubeTop{
            animation: KF_cubeTop 2s  ease 3s both ;
            transform-origin:center top ;/* :绕x旋转，确定y的高度 ：right top , center top ,1px 0px, 2px  0px,.. 100px 0px .. */
        }
        .cubeLeft{
            animation: KF_cubeLeft 2s  ease 5s both ;
            transform-origin:left center  ; /* :绕Y旋转，确定x  ： left bottom , left  300px, 0  300px,..0 500px .. */
        }
        .cubeRight{
            animation: KF_cubeRight 2s  ease 7s both ;
            transform-origin:right center ;/* :绕Y旋转，确定x ：right top , right 0 ,300px 100px, 300px  200px,.. 300px 0px .. */
        }

        .cubeFront{
            animation: KF_cubeFront 2s  ease 9s both ;
            transform:translateZ(0px);
        }
        .cubeBack{
            animation: KF_cubeBack 2s  ease 0s both ;
            transform:translateZ(-300px);
        }

 
        @keyframes   KF_cubeBottom{
            0%{ transform:none;  background: none; }
            100%{
                text-indent:0px ;
                background: rgba(0,0,0,0.3);
                transform: rotateX(90deg) ;
            }
        }

        @keyframes   KF_cubeTop{
            0%{ transform:none; }
            100%{
                text-indent:0px ;
                transform: rotateX(-90deg) ;
            }
        }

        @keyframes   KF_cubeLeft{
            0%{ transform:none; }
            100%{
                text-indent:0px ;
                transform: rotateY(90deg) ;
            }
        }
        @keyframes   KF_cubeRight{
            0%{ transform:none; }
            100%{
                text-indent:0px ;
                transform: rotateY(-90deg) ;
            }
        }

        @keyframes KF_cubeBack  {
            0%{ transform:none; }
            100%{
                text-indent:0px ;
                transform:translateZ(0px);
            }
        }
        @keyframes KF_cubeFront  {
            0%{ transform:none; }
            100%{
                text-indent:0px ;
                transform:translateZ(-300px);
            }
        }

    </style>
</head>
<body>
<div class="con">
    <div class="cubeBox">
        <div class="cube cubeBack">back</div>
        <div class="cube cubeBottom">Bottom</div>
        <div class="cube cubeTop">Top</div>
        <div class="cube cubeLeft">Left</div>
        <div class="cube cubeRight">Right</div>
        <div class="cube cubeFront">front</div>
    </div>

</div>

</body>
</html>

　　

　　

转载于:https://www.cnblogs.com/July-/p/5830558.html

bairan9926
关注
CSS3-3D动画制作旋转立方体
爱玲姐姐的博客
02-21 1693
CSS3-3D动画制作旋转立方体 3D动画是CSS3才有的属性，制作立方体的思路是使用6个正方形div，通过绝对定位+旋转+位移来合成一个立方体。然后再使父亲旋转。 旋转后的面会变成新的X-Y面，旋转后Z轴和位移是对新的面来说的，不是原来的面来说的，这点很重要，一定不要搞错。（也就是旋转后坐标轴的方向会改变） 代码很短，主要属性都加了注释了 <!DOCTYPE html> &lt...
html5制作一个立方体,CSS3 3D transforms系列教程-立方体
weixin_39712705的博客
06-10 637
学习制作3D翻转卡片是开始学习3D transform的一个好方法。一旦你掌握了3D翻转卡片的制作方法，是不是迫不及待的想制作更复杂的3D物体？我们在这个教程中将开始学习制作3D立方体。3D立方体的HTML结构和3D卡片的HTML结构一样简单，它需要6个元素来制作立方体的6个面：123456给立方体的六个面设置基本的定位方式和尺寸：.container {width: 200px;height: ...
transform—3D立方体
weixin_30335353的博客
06-30 156
1、思路分析 第一步：首先需要一个大盒子，承载立方体的六个面； 第二步：立方体的六个面需要3D转化在特定的位置，拼接成一个立方体； 第三步：设置动画； 2、代码实现 第一步：创建div并且设置样式： <style> .box { width: 150px; height: 150px; back...
CSS 3D transform画立方体
qq_40890601的博客
05-26 206
用CSS画了个立方体。主要用的transform 属性。 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>3D transform</title> <style> .container { margin: 50px; p
3D转换立方体搭建
weixin_34195364的博客
01-16 198
查看 webpack 官网文档，一直觉得官网中间的这个旋转的立方体非常契合webpack这款打包工具的理念。由一个大的立方体包围一个小立方体，转向却相反。经过这样的转换后一推凌乱的文件就被打包成整齐的资源。 动画非常棒，简洁形象。这也是给我留下深刻印象的原因。再观细节，立方体的外围宽度明显宽于其他边框，这增加了立方体的景深，配合内部的小立...
css3特性中的transform：translateZ(0)有什么作用？
m0_69892739的博客
04-27 1371
定义 3D 转换，只是用 Z 轴的值。Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
一款利用html5和css3实现的3D立方体旋转效果教程
09-27
例如，可以设置立方体容器（container）的transform-style为preserve-3d，这样容器内的每个面（div）在被旋转时，都能够保持在同一个3D空间内。 立方体的每个面通过旋转和位移得到。例如，上、下面绕X轴旋转，左右...
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
10-22
本文主要讲述了利用CSS3中的transform属性和原生JavaScript来实现一个可以被鼠标拖动的3D立方体旋转效果。以下是详细的知识点介绍。 知识点一：CSS3的transform属性 transform是CSS3中用于变形的一个重要属性，它...
HTML5 transform三维立方体实现360无死角三维旋转效果
09-28
总之，HTML5的`transform`属性为Web开发人员提供了创造丰富交互体验的可能性，但实现三维立方体旋转并处理视图顺序需要对CSS3和JavaScript有深入的理解。通过不断学习和实践，我们可以克服这些挑战，构建出更加生动...
CSS3新增样式2D+3D效果-立方体旋转
weixin_43981560的博客
05-30 352
CSS3新增样式2D+3D变形 下面是通过旋转和平移实现的3D立方体旋转 CSS3新增2D变形属性 2D变形：transform主要包括以下几种：none、旋转rotate、扭曲skew、缩放scale、移动translate、矩阵变形matrix 旋转和平移属性 transform：rotate(30deg);//旋转角度 transform:translate(100px,200px);//顺着X、Y轴平移的像素 transform:translateX(100px);//顺着X轴平移的像素
CSS3 transform介绍 （简书）
weixin_34306593的博客
06-08 498
transform本质上是一系列变形函数，分别是translate位移，scale缩放，rotate旋转，skew扭曲，matrix矩阵。 前置属性： transform-origin transform-style perspective perspective-origin backface-visibility 2D变形： translate scale...
关于移动端滑动卡顿现象的解决方案
热门推荐
GrowthHacker的博客
03-12 2万+
-webkit-overflow-scrolling: touch IOS 端特属属性，手指离开屏幕会保持滚动一段距离，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。 overflow: scroll; //该属性随着手指离开立即停止 -webkit-overflow-scrolling: touch;//该属性随着手指离开还会保持滚动 -webkit-transform: ...
echarts立方体柱状图
最新发布
qq_35381576的博客
04-08 417
在series加入自定义和原始的bar。
Echarts自定义图形，方法参考
GhostPaints的博客
12-21 8621
echart自定义图形，制作一个三个面组成的，伪3D柱形图
CSS3 transform动画 3D旋转立体正方形
weixin_44167504的博客
09-07 2059
CSS3 transform动画 旋转立体正方形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>立体正方形</title> <style> #box {
echarts 3d立体多色柱状图
u011933026的博客
11-02 190
3d立体柱状图
transform实现简单3D立体正方体旋转
qq_44472790的博客
11-28 1053
初始效果图 html <div class="box-parent"> <span class="box-children">1</span> <span class="box-children">2</span> <span class="box-children">3</span> <span class="box-children">4</span&
css3中的transform中的3d变换：translatez()与transform-origin-z()的区别
kbx8916的博客
03-27 8591
3d变换中的移动，z中的正方向面向用户,值越大，越靠近用户。 translatez（100px）离用户更近了。 transform-origin-z中z轴的正方向向内，即值越大，离用户越远。与translatez刚好相反。 默认：transform-origin:50% 50% 0px;
css3动画-transform属性
磷火的博客
05-14 1万+
css3动画--transform属性（translate，scale，rotate）
CSS3实现3D立方体旋转效果详解
"本教程介绍了如何使用HTML5和CSS3创建3D立方体旋转效果，主要涉及CSS3的3D变换特性，包括perspective、translateZ、preserve-3d以及各种旋转、位移和缩放函数。通过学习，读者可以掌握构建3D场景的基础知识，实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值