前言

本文介绍了css简单魔方样式的基础内容。

一、对于3D的理解图

二、使用步骤

HTML代码如下（示例）：

 <section><div><img src="../images/1.jpg" alt=""></div><div><img src="../images/2.jpg" alt=""></div><div><img src="../images/3.jpg" alt=""></div><div><img src="../images/4.jpg" alt=""></div><div><img src="../images/5.jpg" alt=""></div><div><img src="../images/6.jpg" alt=""></div></section>

CSS代码如下（示例）：

 <style>* {margin: 0;padding: 0;}html {width: 100%;height: 100%;}body {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}section {width: 150px;height: 150px;position: relative;animation: rate 4s linear infinite;transform-style: preserve-3d;}section div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #fff;}img {width: 100%;height: 100%;}</style>

动画代码如下（示例）：

 <style>section div:nth-child(1) {transform: translateZ(75px);}section div:nth-child(2) {transform: rotateY(-90deg) translateZ(75px);}section div:nth-child(3) {transform: rotateY(180deg) translateZ(75px);}section div:nth-child(4) {transform: rotateY(90deg) translateZ(75px);}section div:nth-child(5) {transform: rotateX(90deg) translateZ(75px);}section div:nth-child(6) {transform: rotateX(-90deg) translateZ(75px);}img {width: 100%;height: 100%;}@keyframes rate {from {transform: rotateY(0) rotateX(0);}to {transform: rotateY(360deg) rotateX(360deg);}}</style>

效果展示

总结

例如：以上就是今天要讲的内容。

运用css设计简单3D魔方相关推荐

CSS 实现一个3d魔方
前言
android 3d魔方代码,css实现3d立体魔方的示例代码
今天来做一个简单的3d魔方先看效果图吧!把这个看会了,一些网上的3d的相册你就都会了一.我们先准备好们的html代码 3d立体魔方好了我们html代码就准备完成了,首先我们要有一个3d的思维,在 ...
用CSS实现3D魔方动画旋转
一.3D魔方的实现这里呢主要是用我们的div标签来对魔方的各个面及各个块进行实现,先上一个主体的html代码吧 <div id="box"><!-- 各个面 - ...
纯CSS实现的3D简洁按钮设计
日期:2012-6-22 来源:GBin1.com 在线演示本地下载今天我们介绍一篇来自Brandon Pierce的3D按钮设计.希望大家喜欢! 基本HTML <nav>  &l ...
Android 3D 魔方游戏的设计与开发
Android 3D 魔方游戏的设计与开发 5.1 Feature 定义魔方是一个有趣的益智游戏,相信很多人都玩过.本次毕业设计,欲完成的主要的功能如下: (1) 开始游戏:开始一个新的游戏 (2) ...
HTML5期末大作业：旅游网站设计——简单大气的响应式旅游网页(5页) HTML+CSS+JavaScript...
HTML5期末大作业:旅游网站设计--简单大气的响应式旅游网页(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页 ...
JavaScript设计了3D六面魔方,实现了魔方的动画
第一步划分区域一块大区域覆盖了六个小区域,一共定义7个div,在接下来进行添加样式做准备第二步创建一个css文本样式,对魔方的所在div进行设置样式第三步对六个面变进行划分,现在的六个面都没有 ...
php用户注册功能设计,利用HTML+CSS设计一个简单的用户注册页面【示例】
本篇文章将要给新手小白们介绍如何使用HTML和css制作简单的注册页面.在开发网站过程中,如果网站内容要求是完善的信息站,那么肯定就离不开用户注册的这个功能.这个用户注册界面对于刚入门的前端新手来说, ...
web设计网页规划与设计：企业电子网站设计——简单的电子产品公司官网模板(5页)HTML+CSS+JavaScript
HTML5期末大作业:动漫网站设计--简单的电子产品公司官网模板html(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码 ...

运用css设计简单3D魔方

文章目录

前言

一、对于3D的理解图

二、使用步骤

总结

运用css设计简单3D魔方相关推荐

最新文章

热门文章