CSS之立方体绘画步骤

附上总的代码：

<!DOCTYPE html>
<html>
<head>
<title>立方体</title>
<meta charset="utf-8">
<style type="text/css">
.SD{margin: 400px 400px;width: 300px;height: 300px;position: relative;transform-style: preserve-3d;transform: rotateX(30deg) rotateY(30deg);}
.face{width: 100%;height: 100%;border:3px solid red;position: absolute;}
.face:nth-child(1){
transform: rotateX(90deg) translateZ(150px);
}
.face:nth-child(2){
transform: rotateX(90deg) translateZ(-150px);
}
.face:nth-child(3){
transform: rotateY(90deg) translateZ(150px);
}
.face:nth-child(4){
transform: rotateY(90deg) translateZ(-150px);
}
.face:nth-child(5){
transform: translateZ(150px);
}
.face:nth-child(6){
transform: translateZ(-150px);
}
</style>
</head>
<body>
<div class="SD">
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/KJ-Z/p/5663439.html

CSS之立方体绘画步骤相关推荐

HTM+CSS实现立方体图片旋转展示效果
目的:HTM+CSS实现立方体图片旋转展示效果环境: 系统:Win10 环境: 一.示例1. 话不多说直接上代码 <html><head><style>/*立方体 ...
圆锥形怎么画_素描教程-圆锥体的绘画步骤
原标题:素描教程-圆锥体的绘画步骤圆锥体,由侧部的扇形和底部的形组成.我们在绘画前要准确把握圆锥体的形体及透视结构关系,注意底部弧形线条的刻画. 几何体素描之圆锥体绘画角度1 1.准确把握圆锥体的形 ...
webpack项目css插件压缩等步骤
webpack项目css插件压缩等步骤 minicssextractplugin css插件防止闪屏首先安装npm i mini-css-extract-plugin -S 要求webpack5 这 ...
html立方体旋转展开,利用CSS实现立方体360度旋转效果实例代码
静态效果图如下: 示例代码: 复制代码代码如下: * { margin: 0; padding: 0} ul {list-style: none;} ul { width: 200px; height ...
如何用计算机设计衣服,“电脑时装效果图”作为一名设计师你怎能不懂（含绘画步骤图）...
原标题:"电脑时装效果图"作为一名设计师你怎能不懂(含绘画步骤图) 更多独家素材分享欢迎添加博主微信 Wlb109701 什么是电脑服装效果图? 电脑服装效果图就是用电脑软件来绘制 ...
纯CSS实现立方体旋转
下面为通过CSS动画实现的立方体旋转,可以改变CSS代码中关键帧定义(@keyframes)来改变立方体的旋转方式 HTML部分: <body class="body"> ...
css网页制作的基本步骤,以图例方式介绍CSS制作网页详细步骤
首先要做的是确定页面结构.随着你对CSS布局的逐步学习,这个过程会变得越来越简单.通过运用大量绝对定位和大幅背景图片,我们可以非常简单地完成这个设计. 第三步现在,我们需要两张背景图片.一张大的,存 ...
css旋转立方体教程,css 旋转立方体
1.需要了解相关css样式 1.position属性值:relative\absolute; /* position进行定位,父元素的position属性值为relative相对定位,子元素的pos ...
html 设置滚动条颜色,CSS设置滚动条颜色步骤
本文向大家描述一下如何使用CSS设置滚动条颜色,如果你在浏览网页的时候看到网页滚动条颜色不是系统默认的样式,而是漂亮的红色或其它颜色样式,那么这就是使用CSS代码设置的效果. CSS设置滚动条颜色我 ...
人类一败涂地做图教程_绘画步骤_人类一败涂地鼠绘人物步骤与技巧_3DM单机
第一波根据自己喜欢的人物角色选好模型,模型选不好画出来就不像第二步对模型进行上色在上色时可选择对某一部位涂色第三步绘制人物服装细节,首先是起个大概的形状 ,ALT镜头拉进,画笔最小化,然后利用 ...

CSS之立方体绘画步骤

CSS之立方体绘画步骤相关推荐

最新文章

热门文章