精华内容
下载资源
问答
  • css画一个正方体@keyframes flash {0%{ transform: rotateY(0) rotateX(0); }100%{ transform: rotateY(360deg) rotateX(360deg); }}.box {width: 100px;height: 100px;position: relative;margin: 100px auto 0;...
    css画一个正方体

    @keyframes flash {

    0%{ transform: rotateY(0) rotateX(0); }

    100%{ transform: rotateY(360deg) rotateX(360deg); }

    }

    .box {

    width: 100px;

    height: 100px;

    position: relative;

    margin: 100px auto 0;

    transform-style: preserve-3d;

    animation: flash 3s linear infinite;

    }

    .box > div {

    position: absolute;

    width: 100px;

    height: 100px;

    transition: all 1s;

    }

    .box>div:nth-of-type(1){ background: lightblue; }

    .box>div:nth-of-type(2){ background: lime; }

    .box>div:nth-of-type(3){ background: lightseagreen; }

    .box>div:nth-of-type(4){ background: orange; }

    .box>div:nth-of-type(5){ background: darkorchid; }

    .box>div:nth-of-type(6){ background: pink; }

    .box>div:nth-of-type(1){ transform: translateZ(-50px); }

    .box>div:nth-of-type(2){ transform: rotateX(90deg) translateZ(50px); }

    .box>div:nth-of-type(3){ transform: rotateX(90deg) translateZ(-50px); }

    .box>div:nth-of-type(4){ transform: rotateY(90deg) translateZ(50px);}

    .box>div:nth-of-type(5){ transform: rotateY(90deg) translateZ(-50px);}

    .box>div:nth-of-type(6){ transform: translateZ(50px); }

    1
    2
    3
    4
    5
    6

    效果

    bVbExH1

    展开全文
  • 出如下的图像 主要使用的方法就是transform里面的skew变形和translate移动 下面是CSS代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</...

    画出如下的图像
    在这里插入图片描述
    成品
    在这里插入图片描述
    主要使用的方法就是transform里面的skew变形和translate移动
    下面是CSS代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            .top{
                width: 240px;
                height: 60px;
                background-color:#dddddd;
                transform:skew(-45deg,0deg) translate(30px,0px);
            }
            .center{
                width: 240px;
                height: 240px;
                background-color: #aaaaaa;
                float: left;
            }
            .right{
                width: 60px;
                height: 240px;
                background-color:#888888;
                float:left;
                transform:skew(0deg,-45deg) translate(0px,-30px);
            }
        </style>
    </head>
    <body>
    <div class="top"></div>
    <div class="center"></div>
    <div class="right"></div>
    </body>
    </html>
    
    展开全文
  • } 下面是正方形截图 正方形截图 transform-style 该属性有两个值,一个是flat,一个是perspective-3d,前者是默认值,代表是平面渲染,没有3d的效果,后者恰好相反,要使用3d效果,需要设置改属性为后者 perspective ...

    html部分

    A
    B
    C
    D
    E
    F

    style部分

    #box div{

    position: absolute;

    height:160px;

    width: 160px;

    border:3px solid #000;

    background: rgba(255,200,100,0.8);

    text-align:center;

    font-size: 130px;

    }

    #box{

    width: 160px;

    height: 160px;

    margin:100px auto;

    -webkit-transform-style:preserve-3d;

    -webkit-transform-origin:80px 80px 0;

    -webkit-perspective:140px;

    }

    #box>div:nth-child(1){

    -webkit-transform: translateZ(80px);

    }

    #box>div:nth-child(2){

    transform: rotateX(90deg) translateZ(-80px);

    }

    #box>div:nth-child(3){

    transform: rotateX(90deg) translateZ(80px);

    }

    #box>div:nth-child(4){

    transform: rotateY(90deg) translateZ(80px);

    }

    #box>div:nth-child(5){

    transform: rotateY(90deg) translateZ(-80px);

    }

    #box>div:nth-child(6){

    transform: translateZ(-80px);

    }

    下面是正方形截图

    cube.png

    正方形截图

    transform-style

    该属性有两个值,一个是flat,一个是perspective-3d,前者是默认值,代表是平面渲染,没有3d的效果,后者恰好相反,要使用3d效果,需要设置改属性为后者

    perspective

    该属性定义了到z=0的距离,默认是0或者none,此时没有3d的效果,需要大于0才能看到效果。

    perspective-origin

    该属性是用来定义视角的x位置和y位置,即眼睛看的位置,默认是50%,50%,即正方形的中心位置。

    坐标轴

    注意看坐标轴,这是没有任何旋转时坐标轴的标识,+x右,-x左,+y上,-y下,+z前,-z后,假如元素执行了rotateX(90deg),即在x轴顺时针旋转了90度, 像C的正方形先是在x,y轴上的正方形,放倒在x,z轴上,此时y轴变成了z,z变成了y。

    73390c0ae839?t=123

    正方形截图

    展开全文
  • 使用CSS3画一个正方体

    千次阅读 2019-07-16 17:50:01
    <!DOCTYPE html> <html> <head> <style> .main{ height: 500px; width: 500px; position: absolute; left: 50%; top: 50%; border:0px solid black... transform: translate(-50%,-5...
    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    .main{
    	height: 500px;
    	width: 500px;
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	border:0px solid black;
    	transform: translate(-50%,-50%) rotateX(45deg) rotateY(45deg);
    	transform-style: preserve-3d;
    }
    
    .main div{
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	height: 250px;
    	width: 250px;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	font-size: 60px;
    	font-weight: bold;
    }
    
    .main:hover{
    	transform: translate(-50%,-50%)  rotateX(145deg) rotateY(45deg) rotateZ(105deg);
    	transition: all 5s;
    }
    
    .face1{
    	background-color: pink;
    	transform:translate(-50%,-50%) translateY(-125px) rotateX(90deg);
    }
    
    .face2{
    	background-color: red;
    	transform:translate(-50%,-50%) translateX(-125px) rotateY(90deg);
    }
    
    .face3{
    	background-color: blue;
    	transform:translate(-50%,-50%) translateZ(-125px);
    }
    
    .face4{
    	background-color: yellow;
    	transform:translate(-50%,-50%) translateY(125px) rotateX(90deg);
    }
    
    .face5{
    	background-color: green;
    	transform:translate(-50%,-50%) translateX(125px) rotateY(90deg);
    }
    
    .face6{
    	background-color: orange;
    	transform:translate(-50%,-50%) translateZ(125px);
    }
    
    </style>
    </head>
    <body>
    	<div class="main">
    		<div class="face1">1</div>
    		<div class="face2">2</div>
    		<div class="face3">3</div>
    		<div class="face4">4</div>
    		<div class="face5">5</div>
    		<div class="face6">6</div>
    	</div>
    </body>
    </html>

    在chrome上运行效果如下:

     

    展开全文
  • CSS技术很强大,不仅仅是可以调色啊,调位置...现在,给大家看一下如何制作一个会动的正方体。 废话少说,小弟献丑上代码了!(手动滑稽) 首先我们先用HTML构建好 在网页中能把这个正方体呈现出来的所需的div ...
  • CSS3动画之正方体

    2021-04-15 19:46:59
    css3实现正方体
  • 以上使用到的css部分代码理解 浏览器查看或者尝试修改贝塞斯曲线 3D场景 以上使用到的代码 animate 开始动手 实战代码Download 快捷链接 目标实现正方体的效果 Transition 理解 transition...
  • CSS画正方体

    2021-08-09 16:17:35
    CSS画正方体 实现效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .wrapper { width: 50%; float: left; ...
  • 创建HTML结构我们创建一个父容器,里面保存正方体六个面创建CSS样式.mBox {width: 200px;height: 200px;margin: 50px auto;top: 100px;transform-style: preserve-3d; /*开启3D*/position: relative;transform: ...
  • css3动画——正方体旋转 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=...
  • CSS3的变形(transform)属性让元素在一个坐标系统中变形。transform属性的基本语法如下: transform:none | <transform-function> [<transform-function>]* 2Dtransform常用的transform-function...
  • css3动画-正方体

    2020-05-08 11:32:05
    css属性 animation 关键帧 opacity 透明度 transform 动画 transform-style: preserve-3d; /* 重点:保留子元素的3d效果*/ perspective: 1000px; /*设置透视点*/ code <!DOCTYPE html> <...
  • CSS3一个正方体

    2019-09-03 10:44:25
    1.html代码 <div class="box"> <ul> <li>上</li> <li>下</li> <li>左</li> <li>右</li> <li>前<.../li>...
  • CSS3动画实现正方体及旋转 提示:以下是本篇文章正文内容,下面案例可供参考 、transform是什么? 二、使用步骤 1.html 代码如下(示例): <!DOCTYPE html> <html> <head> <...
  • /* 为了方便观察,将整个正方体进行旋转 */ transform : rotateX ( 10 deg ) rotateY ( 10 deg ) ; perspective - origin : 50 % 50 % ; animation : run 5 s linear infinite ; /* 里面可透视...
  • css3动画效果 正方体3d旋转

    千次阅读 2017-08-15 20:12:09
    既然自己对css3有过深入了解,那还是意思意思一下吧!!<!DOCTYPE html> <title>3d旋转正方体 .box1{ width: 750px;
  • &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="...正方体&lt;/title&gt; &lt;style&gt; *{ margin: 0;

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 936
精华内容 374
关键字:

css画一个正方体