HTML5七天学会基础动画网页10(2)

制作立方体

学完前面的基础内容,制作立方体是个不错的练习方法,先看成品

60a7a1f8d3a244178176547f9378eead.png

 再分析一下,六个面让每个面旋转平移就可以实现一个立方体,来看代码:

 <title> 制作立方体</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

       body{

        perspective: 1000px;

       }

       ul{

        width: 300px;

        height: 300px;

        line-height: 200px;

        text-align: center;

        font-size: 50px;

        margin: 200px auto;

        list-style: none;

        position: relative;

        transform-style: preserve-3d;

        transform: rotate3d(1,1,0,60deg);

       }

       li{

        width: 100%;

        height: 100%;

        border: 1px solid black;

        position: absolute;

       }

       /* 我们让第一个面向后移动元素宽的一半 */

       li:nth-of-type(1){

        transform: translateZ(-150px);

        /* 0.6是我们设置的背景颜色的透明度 */

        background-color: rgb(0, 136, 255,0.6);

       }

       /* 第二个面我们让他向前移动元素宽的一半 */

       li:nth-of-type(2){

        transform: translateZ(150px);

        background-color:rgb(0, 238, 255,.6);

       }

       /* 第三个面先横向转90deg再向外平移元素的一半 */

       li:nth-of-type(3){

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

        background-color:rgb(255, 157, 0,.6);

       }

6d5d8f1b17c24995a787e3ed5a647ce8.png

 

        /* 第四个面先横向转90deg再向后平移元素的一半 */

       li:nth-of-type(4){

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

        background-color:rgba(255, 0, 238, 0.6);

       }

87e1f2364f3445b3bdd521dd8b9c98a6.png

 

/* 第五个面先向下转90deg再向上平移元素的一半 */

       li:nth-of-type(5){

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

        background-color:rgba(255, 0, 93, 0.6);

       }

/* 第六个面先向下转90deg再向下平移元素的一半 */

       li:nth-of-type(6){

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

        background-color:rgba(0, 255, 55, 0.6);

       }

    </style>

</head>

<body>

   <ul>

    <li>A</li>

    <li>B</li>

    <li>C</li>

    <li>D</li>

    <li>E</li>

    <li>F</li>

   </ul>

</body>

4a5488a5c45d4201b013d8e991714191.png

 

接下来我们会说一下css3动画基础,这一部分了解完之后就可以再给立方体加一个动画效果,让它一直旋转。

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/738416.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kotlin:枚举类

点击查看枚举类中文文档 点击查看枚举类英文文档 枚举类的最基本的用法是实现类型安全的枚举&#xff1a; enum class Direction {NORTH, SOUTH, WEST, EAST }每个枚举常量都是一个对象。枚举常量用逗号分隔。 初始化 因为每一个枚举都是枚举类的实例&#xff0c;所以他们可…

零基础学习JS--基础篇--正则表达式

正则表达式 正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中&#xff0c;正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法&#xff0c;以及 String 的 match、matchAll、replace、search 和 split 方法。 创建一个正则表达式&#xff1a; 你…

三大排序:冒泡、选择、插入

冒泡排序&#xff1a; 冒泡排序&#xff08;Bubble Sort&#xff09;是一种简单的排序算法。它通过比较相邻元素的大小&#xff0c;并交换它们的位置&#xff0c;使较大&#xff08;或较小&#xff09;的元素逐渐“浮”到数组的一端&#xff0c;从而实现排序的目的。 下面是冒…

【HTML】div设为输入框,巧妙添加placeholder效果

效果图 文本撑满时 初始化时 码 contenteditable"true" 设为可编辑状态 <divcontenteditable"true"placeholder"评个小论吧&#xff01;"class"textarea"></div><style>/* 设置最小高度&#xff0c;超过滚动显示 …

Qt/QML编程之路:QWidget和QML编程的差异(44)

前言: 如果你开始使用Qt,那么必然会遇到QWidget和QML,一开始甚至可能很迷糊,怎么一会qml一会QWidget,两者到底有啥区别? Qt是一个流行的跨平台应用程序框架,允许开发人员使用包括C++在内的各种编程语言创建图形用户界面(GUI)和其他类型的应用程序。Qt提供了一组库和…

python基础练习 VIP试题17道

一、阶乘计算 题目描述 输入一个正整数n&#xff0c;输出n!的值&#xff0c;其中n!123*…*n。 算法描述 n!可能很大&#xff0c;而计算机能表示的整数范围有限&#xff0c;需要使用高精度计算的方法。使用一个数组A来表示一个大整数a&#xff0c;A[0]表示a的个位&#xff0…

Python 导入Excel三维坐标数据 生成三维曲面地形图(面) 3、线条平滑曲面但有条纹

环境和包: 环境 python:python-3.12.0-amd64包: matplotlib 3.8.2 pandas 2.1.4 openpyxl 3.1.2 scipy 1.12.0 代码: import pandas as pd import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D from scipy.interpolate import griddata im…

操作系统:进程地址空间

目录 1.程序地址空间 1.1.程序地址空间的介绍 1.2.程序地址空间的本质 2.进程地址空间 3.Linux下的地址空间 1.程序地址空间 1.1.程序地址空间的介绍 我们在学习C/C时&#xff0c;对于各组分的地址分配在程序地址空间的不同模块 如图我们能够验证各组分的对应的地址排布位…

xss.haozi.me靶场“0x00-0x0A”通关教程

君衍. 一、靶场介绍二、第一关 0x00 不做限制三、第二关 0x01 文本闭合标签绕过四、第三关 0x02 双引号闭合绕过五、第四关 0x03 过滤括号六、第五关 0x04 编码绕过七、第六关 0x05 注释闭合绕过八、第七关 0x06 换行绕过九、第八关 0x07 删除标签十、第九关 0x08 多加空格绕过…

L2-002 链表去重 (25 分)(数组模拟)(附链表相关)

给定一个带整数键值的链表 L&#xff0c;你需要把其中绝对值重复的键值结点删掉。即对每个键值 K&#xff0c;只有第一个绝对值等于 K 的结点被保留。同时&#xff0c;所有被删除的结点须被保存在另一个链表上。例如给定 L 为 21→-15→-15→-7→15&#xff0c;你需要输出去重后…

负数的四舍五入

负数的四舍五入 标签:基础 System.out.println(Math.round(-0.2)); System.out.println(Math.round(-0.5)); System.out.println(Math.round(-0.6));0 0 -1理解:四舍五入,找一个离目标小数近的整数,-0.2和0近,-0.6和-1近,中间的往右靠

力扣每日一题 将标题首字母大写 模拟 String API

Problem: 2129. 将标题首字母大写 文章目录 思路复杂度Code 思路 &#x1f468;‍&#x1f3eb; 灵神题解 复杂度 ⏰ 时间复杂度: O ( n ) O(n) O(n) &#x1f30e; 空间复杂度: O ( n ) O(n) O(n) Code class Solution {public String capitalizeTitle(String title)…

vue3的组件间的v-model参数

v-model 参数 默认情况下&#xff0c;组件上的 v-model 使用 title作为 prop 和 update:title作为事件。我们可以通过向 v-model 传递参数来修改这些名称&#xff1a; zizhi是我自己创建的组件 <zizhi v-model:title"modelValue"></zizhi> 如何让父组件…

重定向、管道与环境变量

前言&#xff1a;测试开发的学习已经开启第三周的学习了。 奋斗至此&#xff0c;内容已稍有难度。 发现每一点都有其深挖的地方&#xff0c;但读书在某些方面来讲要不求甚解&#xff0c;如果只在一点深挖&#xff0c;那可能进度很难提的上来。 继续加油&#xff01;&#xf…

es 分词器详解

基本概念 分词器官方称之为文本分析器&#xff0c;顾名思义&#xff0c;是对文本进行分析处理的一种手段&#xff0c;基本处理逻辑为按照预先制定的分词规则&#xff0c;把原始文档分割成若干更小粒度的词项&#xff0c;粒度大小取决于分词器规则。 分词器发生的时期 1、分词…

实现支持多选的QComboBox

Qt提供的QComboBox只支持下拉列表内容的单选&#xff0c;但通过QComboBox提供的setModel、setView、setLineEdit三个方法&#xff0c;可以对QComboBox进行改造&#xff0c;使其实现下拉列表选项的多选。 QComboBox可以看作两个组件的组合&#xff1a;一个QLineEdit和一个QList…

ctfshow web入门 php特性总结

1.web89 intval函数的利用&#xff0c;intval函数获取变量的整数值&#xff0c;失败时返回0&#xff0c;空的数组返回&#xff0c;非空数组返回1 num[]1 intval ( mixed $var [, int $base 10 ] ) : int Note: 如果 base 是 0&#xff0c;通过检测 var 的格式来决定使用的进…

【工具】Git的介绍与安装

目录 前言 1W&#xff1a;什么是Git&#xff1f; 2W&#xff1a;为什么使用Git&#xff1f; 3W&#xff1a;如何使用Git&#xff1f; Git的安装步骤 测试 3.1 桌面空白部分鼠标右击 3.2 选择 Open Git Bash here 3.3 输入 git -v 命令查看版本 Git区域分布 Git的工作…

软件无线电系列——软件无线电的发展历程及体系框架

本节目录 一、软件无线电的起始 二、软件无线电SDR论坛 三、SPEAKeasy计划 四、JTRS与SCA 五、软件无线电体系框架本节内容 一、软件无线电的起始 1992年5月&#xff0c;美国电信会议上&#xff0c;Joseph Mitola III博士提出来软件无线电(Software Radio,SR)的概念。理想化的…

C语言演示多线程编程条件下自旋锁和屏障的使用

主线故事: 有4个人玩游戏输了,惩罚: 1 分别使用4台不同的ATM机给我存钱 2 必须一块一块的存 3 存完还得在ATM上看一下我的余额 设计模式: 1 每个人使用一条单独的线程,再准备一个计时线程用来输出时间 2 存钱 涉及到 对共享资源的读写,是原子操作需要用锁保护 这里使用自…