一个简单的CSS 正方体制作

最新推荐文章于 2024-04-10 09:21:27 发布
最新推荐文章于 2024-04-10 09:21:27 发布
阅读量8.7k 收藏 10
点赞数 2
分类专栏： 2017年
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wybqq/article/details/56016640
版权

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/test.css">
</head>
<body>
   <p >kaekeaeaaaaaaaaaaaaaaaaaaaeeeeeee</p>
   <div>css 动画</div>
   <div class="contain">
       <div class="box">
           <div class="face one"> </div>
           <div class="face two"> </div>
           <div class="face three"> </div>
           <div class="face four"> </div>
           <div class="face five"> </div>
           <div class="face six"> </div>
       </div>
   </div>
</body>
</html>

test.css

@keyframes rotate {
    100% {
        transform: rotateY(360deg) rotateX(360deg);
    }
}
.contain {
    position: relative;
    perspective: 1600px;
    animation: rotate-frame 30s linear infinite;

}
.box {
    animation: rotate 20s ease 0s normal none infinite running ;

    height: 240px;
    margin: 0 auto;
    position: relative;
    transform-style: preserve-3d;
    width: 240px;


}

.face {
    backface-visibility: hidden;
    background-color: #fae48c;
    height: 240px;
    opacity: 0.6;
    position: absolute;
    width: 240px;

}
.box .one {

    background-color: #fae48c;
    transform: rotateX(90deg) translateZ(120px);

}
.box .two {
    background-color:#9900CC ;
    transform: translateZ(120px);
}
.box .three {

    transform: rotateY(90deg) translateZ(120px);
    background-color: yellow;
}
.box .four {
    transform: rotateY(180deg) translateZ(120px);
    background-color: green;
}
.box .five {

    transform: rotateY(-90deg) translateZ(120px);
    background-color: greenyellow;
}
.box .six {
    transform: rotateX(-90deg) translateZ(120px) rotate(180deg);
    background-color: black;
}

动画结果

这里写图片描述

一叶竹
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单使用 CSS 画一个正方体
m0_49216561的博客
12-22 419
位移属性 translateZ( ) 和旋转属性 rotateX( ) / rotateY( )；使子元素立体呈现：transform-style: preserve-3d;使用CSS3的3D变换。
利用CSS3做出立方体
cnjy_的博客
08-08 1万+
如何用css3做出立方体
使用CSS画一个简单的立方体
cangyue_a的博客
03-13 946
使用CSS画个简单的立方体
有趣的css - 旋转的正方体
最新发布
设计师工作日常
04-10 1046
用css打造一个好看的透明感的旋转正方晶体。
如何用 css 画一个正方体
兰亭古墨
06-28 660
懒得写思路了，直接看代码吧
css实现正方形div的3种方式
热门推荐
u010552788的专栏
05-24 3万+
1.CSS3 vw 单位 1vw = 1% viewport width<div class="vw">hello,viewport</div> .vw { width: 50%; height: 50vw; background: #ccc; } 2.padding-bottom <div class="placeholder"></div
利用CSS3的3D效果制作正方体
01-19
学会用CSS3的3D效果制作一个正方体，有助于增强我们对3D场景的旋转和位移属性的理解。下面的动态图就是利用3D旋转位移，结合动画效果制作的。感兴趣的同学可以在完成正方体的制作基础上，再去探究一下添加各种动画...
CSS3自动旋转正方体3D特效
07-28
CSS3自动旋转正方体3D特效是一款基于css3 keyframes属性制作的图片相册自动旋转立方体特效。
旋转的正方体css3制作3D立体效果
09-08
旋转的正方体css3制作3D立体效果
CSS3技术写的一个3D正方体
08-18
本教程将详细讲解如何利用CSS3和jQuery技术来实现一个交互式的3D正方体。 首先，让我们了解一下CSS3中的3D变换。CSS3的transform属性允许我们对元素进行2D和3D转换，如旋转、缩放、平移等。对于3D正方体，关键在于...
使用css实现一个正方形
shu580231的博客
07-02 1万+
    很多情况下，在移动端的设计里，会出现要求图片等高等宽，而图片的宽度又是随着不同的移动设备进行改变的，这个时候就需要用到正方形的一个实现。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style
css3如何简单的做一个立方体
zhangbiaoxiaoming的博客
10-18 1622
需要用到的知识点 transform属性 旋转 （1）rotateX() 方法 通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。 （2）RotateY 通过 rotateX() 方法，元素围绕其 Y 轴以给定的度数进行旋转。 （3）RotateZ 通过 rotateX() 方法，元素围绕其 Z 轴以给定的度数进行旋转。 平移 translateX(x) 定义 3D 转化...
Css制作立方体
wenqianqian1的博客
03-08 2855
立方体它是有六个面的,并且它的每个面都是相同大小的。我们在去设置正方体的时候首先得去把它的这六个面给设置出来，这六个面它想要呈现出一个正方体的效果，那么它肯定是在一个具有空间感的父元素里面的。参考下图图1、图2、图3 图1立方...
CSS3 立方体
小折腾
07-02 2050
一、需求Demo源码下载二、分析以上是通过CSS3实现的3D立方体以及动画效果。通过CSS3的动画属性，可以做出很多非常酷炫的效果。动画属性主要包括3个： transform（变形） transition（转换） animation（动画） 整个动画效果由三部分组成： （1）由平面图自动扩展成立方体，自动拼成立方体用到animation属性，旋转则要用到transform里
用css如何写正方体,css3纯写的立方体
weixin_33846508的博客
08-03 480
.box {width:200px;height:200px;transform-style:preserve-3d;position:relative;margin:100px auto 20px;transform:rotateX(20deg) rotateY(20deg);cursor:pointer;transition:all 1s;}.box:hover {transform:rota...
WEB - 使用CSS 画一个正方体
BLOG OF PETERMAOSX.
03-04 830
画出如下的图像 主要使用的方法就是transform里面的skew变形和translate移动 下面是CSS代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style ...
制作一个正方体
weixin_44547598的博客
02-15 1753
制作一个正方体首先需要建立正方体的6个面 因为正方体的6个面都是相同的所以我用x类来写它们的样式 因为正方体它是一个3D物体，所以需要用定位来制作它们 制作一个正方体，需要用css3中的旋转菜能让人看得更立体 并且还将用到关键帧来运行 它的效果是 如果将x类里面的宽高设置为200px或者将所有的translateZ（）括号里的值设置为75px的话它的效果为 ...
CSS3构建一个正方体
weixin_44486443的博客
01-18 1581
《专题技术文献》 开发工具与关键技术：Adobe Dreamweaver CC 2017 作者：落于的天_萧瑟 撰写时间：2019.1.18 一、 网页小图标 首先创建一个标签，在rel 属性中添加 icon 再在href属性中添加自己想要添加的图片链接。 二、 CSS3构建一个正...
使用CSS3画一个正方体
海阔天空的专栏
07-16 3174
<!DOCTYPE html> <html> <head> <style> .main{ height: 500px; width: 500px; position: absolute; left: 50%; top: 50%; border:0px solid black; transform: translate(-50%,-5...
用css写一个正方体代码
08-29
### 回答1： 我建议你使用下面的代码：width: 100px; height: 100px; background-color: #ccc; border: 3px solid #000; transform: rotateX(45deg) rotateY(45deg); ### 回答2： 要用CSS写一个正方体，可以通过CSS的旋转和透视效果来实现。 首先，我们需要一个HTML的结构来表示正方体。可以用一个div元素来代表整个正方体，然后在这个div中再嵌套六个div，每个代表正方体的一个面。 接下来，我们需要用CSS来设置这些div的样式。首先，我们给整个正方体的父div设置宽高和透视效果，可以使用`perspective`属性来设置透视视角。然后，给每个面的div设置宽高、背景颜色，以及通过`transform`属性来进行旋转。 以下是一段示例代码，实现了一个红色的正方体： ```html <div class="cube"> <div class="face front"></div> <div class="face back"></div> <div class="face left"></div> <div class="face right"></div> <div class="face top"></div> <div class="face bottom"></div> </div> ``` ```css .cube { width: 200px; height: 200px; perspective: 800px; } .face { position: absolute; width: 200px; height: 200px; background-color: red; } .front { transform: rotateY(0deg) translateZ(100px); } .back { transform: rotateY(180deg) translateZ(100px); } .left { transform: rotateY(-90deg) translateZ(100px); } .right { transform: rotateY(90deg) translateZ(100px); } .top { transform: rotateX(90deg) translateZ(100px); } .bottom { transform: rotateX(-90deg) translateZ(100px); } ``` 以上代码实现了一个简单的CSS正方体，通过旋转和透视效果，使每个面呈现出立体感，从而形成正方体的效果。可以根据需要，调整每个面的旋转角度、大小和颜色来获得不同的效果。 ### 回答3： 使用 CSS 写一个正方体代码可以通过 CSS 3D Transform 实现。下面是一个示例的代码： HTML: ```html <div class="cube"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> ``` CSS: ```css .cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; transform: rotateX(45deg) rotateY(45deg); animation: spin 6s linear infinite; } .face { position: absolute; width: 200px; height: 200px; background: rgba(0, 0, 0, 0.5); border: 1px solid white; color: white; display: flex; align-items: center; justify-content: center; } .front { transform: translateZ(100px); } .back { transform: translateZ(-100px) rotateY(180deg); } .right { transform: rotateY(90deg) translateZ(100px); } .left { transform: rotateY(-90deg) translateZ(100px); } .top { transform: rotateX(90deg) translateZ(100px); } .bottom { transform: rotateX(-90deg) translateZ(100px); } @keyframes spin { 100% { transform: rotateY(1turn) rotateZ(1turn); } } ``` 上面的代码实现了一个旋转的正方体，每个面都有一个背景色，并且显示了对应的数字。正方体通过 `transform-style: preserve-3d` 来保证变换效果不会影响到其它元素。每个面通过 `transform` 进行位置和旋转的调整，使用 `translateZ` 来设置面的位置，使用 `rotateX`、`rotateY` 来设置面的旋转角度。通过设置 `animation` 属性，可以使正方体自动旋转。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值