CSS学习笔记二：css 画立体图形

继上一次学了如何去运用css画平面图形，这一次学如何去画正方体，从2D向着3D学习，虽然有点满，但总是一个过程，一点一点积累，然后记录起来。

Transfrom3D

在这一次中运用到了一下几种属性：

rotate:rotateX() rotateY() rotateZ() ；这个属性能够实现翻转效果

translate:translateX translateY() translateZ()　　；这个属性是实现移动效果

origin: 是设立为中心

perspective: 是影响3D的视觉效果，当它的值越小，它视觉会跑到物体的内部。

下面是正方体的代码详解

1、先写body，先写一个容器，然后这个容器里面存放着正方体，正方体里面由六个面，先初始化。

 1 <body>
 2     <div class="box">
 3         <div class="zheng">
 4             <div class="line-1">front</div>
 5             <div class="line-2">back</div>
 6             <div class="line-3">left</div>
 7             <div class="line-4">right</div>
 8             <div class="line-5">TOP</div>
 9             <div class="line-6">bottom</div>
10         </div>
11     </div>
12 </body>

1-6个面分别设立为前后左右上下。

2、构造CSS样式

2.1、body

1 body{ 2 background-color: #000; 3 color:white; 4 }

设置背景颜色为黑色，字体为白色。

2.2、box样式

 1 .box{
 2             width: 300px;
 3             height: 300px;
 4             position: absolute;
 5             left: 50%;
 6             top: 50%;
 7             margin: -150px 0 0 -150px;
 8             perspective-origin:50% 50%;
 9             perspective:3000px;
10         }

设置宽度和高度，成为正方形，通过绝对定位，将其设置在页面中心。

2.3、zheng

1 .zheng{
2             height: 100%;
3             transform-style:preserve-3d;
4             animation:rotate3d 30s infinite linear;
5             border-radius:50%;
6
7         }

宽度和高度来自box，同时设置其运动时间为30s

2.4、设置zheng里面的样式统一属性

1 .zheng > div{
2             border: 1px #fff solid;
3             position: absolute;
4             width: 100%;
5             height: 100%;
6
7         }

为它设置白色边框，设置绝对定位，相对于body定位，width,height都是300px,它是由六个叠加一起的

2.5、设置动态效果

1 @keyframes rotate3d{
2             0%{transform: rotateZ(30deg) rotateY(0);}
3             100%{transform: rotateZ(-135deg) rotateY(360deg);}
4
5         }

2.6、六个面样式设置——前后左右上下

 1     .zheng .line-1{
 2             transform: translateZ(-300px);
 3             transform-origin:bottom;
 4             border-color: blue;
 5         }
 6         .zheng .line-2{
 7             transform-origin:bottom;
 8             border-color: green;
 9         }
10
11         .zheng .line-3{
12             transform: rotateY(-90deg) translateX(-150px) translateZ(150px);
13             transform-origin:orange;
14         }
15         .zheng .line-4{
16             transform: rotateY(-90deg) translateX(-150px) translateZ(-150px);
17             transform-origin:bottom;
18             border-color: red;
19         }
20         .zheng .line-5{
21             transform:rotateX(90deg) translateZ(300px)  ;
22             transform-origin:bottom;
23         }
24         .zheng .line-6{
25             transform:rotateX(-90deg) translateY(300px);
26             transform-origin:bottom;
27         }

六个面设置完成后，可以看到效果

2.7、在正方体上也可以添加图片

1 .zheng .line-1{
2             transform: translateZ(-300px);
3             transform-origin:bottom;
4             border-color: blue;
5             background-image: url(11.jpg);
6             background-repeat: no-repeat;
7
8         }

CSS学习笔记二：css 画立体图形相关推荐

css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
超细的CSS学习笔记（CSS详解）
复习CSS时记录的笔记. 从最基本的 CSS 概念开始,复习如何使用 CSS 同时控制多重网页的样式和布局.同时涉及最新版本 CSS3 的内容,掌握新的标准化组件. 文章目录一.CSS介绍 1.CS ...
Webpack4 学习笔记二 CSS模块转换
前言此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 打包css模块 webpack是js模块打包器, 如果在入口文件引入css文件或其它的less.sass等文件,需要 ...
CSS学习笔记(二) 移动WEB开发
思维导图文章目录思维导图 1. 移动端基础 1.1 浏览器现状 1.2 手机屏幕现状 1.3 移动端调试方法 2. 视口 2.1 布局视口 2.2 视觉视口 2.3 理想视口 2.4 视口总结 2 ...
CSS学习笔记(一) CSS基础+CSS3新特性
思维导图文章目录思维导图 1. CSS 简介 2. CSS 引入方式 2.1 行内样式表 2.2 内部样式表 2.3 外部样式表 2.4 CSS 引入方式总结 3. CSS 选择器 3.1 CSS ...
CSS学习笔记(二) －－－－盒子模型
我们日常生活中的盒子大概见了不少了,且都为六面体,也就是说是立体的. 那么它到底跟我们学习CSS里面的盒子模型到底有些啥区别呢,之前看过不少的书,千篇一律的一句话代过,讲的也不太细,或者是讲的非细但我 ...
媒体查询配合rem使用（HTML+CSS学习笔记二十一）
媒体查询 + rem 计算方法计算rem方法: 结合媒体查询 -> 随着设备的改变更改html font-size的值. 媒体查询确定范围?? 移动端设计图 : 640px 750p ...
HTML及CSS学习笔记 06 - CSS简介和常见的选择器
本文是HTML及CSS课程的第六课.W3C提倡网页的内容与表现分离,层叠样式表(Cascading Style Sheet)即是网页中的"表现"部分,它描述HTML标签将会显示成什 ...
CSS学习笔记11 CSS背景
background-color:背景色前面我们经常用background-color这个属性来设置元素的背景色,例如下面这条css可将段落的背景色设置为灰色 p {background-color ...

CSS学习笔记二：css 画立体图形

CSS学习笔记二：css 画立体图形相关推荐

最新文章

热门文章