【css】六面图旋转。

最新推荐文章于 2022-10-15 15:43:20 发布
最新推荐文章于 2022-10-15 15:43:20 发布
阅读量171 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34365469/article/details/104864890
版权

一.要达到的效果:

悬浮在不同按钮上,正方体展示不同的面。

二.效果图:

初始效果:

悬浮在左侧按钮时,正方体旋转。

三:代码链接:

链接: https://pan.baidu.com/s/1BCfn7VGsc7Tr2UTwnw4pLA 提取码: 3235 复制这段内容后打开百度网盘手机App，操作更方便哦

 

四:源码

-----------------------------------------------------我是分割线----------------------------------------------------------------------------------

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <title>正方体旋转</title>

    <style>

        body,

        ul {

            margin: 0;

        }

 

        ul {

            padding-left: 0;

            list-style: none;

        }

 

        input {

            display: none;

        }

 

        .main {

            display: flex;

            justify-content: space-evenly;

            align-items: center;

            width: 500px;

            height: 500px;

            border: 3px solid black;

            margin: 50px auto;

            background:url("./pic/xiaoli.jpg") center/cover;

        }

 

        .clickarea {

            width: 80px;

            height: 200px;

            /* background-color: red; */

        }

 

        .clickarea>li {

            width: 80px;

            height: 30px;

            margin-top: 3px;

        }

 

        .clickarea>li:nth-child(1) {

            background-color: blue;

        }

 

        .clickarea>li:nth-child(2) {

            background-color: cadetblue;

 

        }

 

        .clickarea>li:nth-child(3) {

            background-color: blueviolet;

 

        }

 

        .clickarea>li:nth-child(4) {

            background-color: brown;

 

        }

 

        .clickarea>li:nth-child(5) {

            background-color: skyblue;

 

        }

 

        .clickarea>li:nth-child(6) {

            background-color: pink;

 

        }

 

 

 

        .squre {

            width: 200px;

            height: 200px;

            float: left;

            /* border: 3px solid black; */


 

            /* perspective: 1000px; */

            transform-style: preserve-3d;

            /* animation: animate1 8s linear infinite; */

            transition: 0.5s linear;

            transform: rotateX(0deg) rotateY(0deg);

 

        }

 

        .squre>div {

            position: absolute;

            width: 200px;

            height: 200px;

            font-size: 16px;

            line-height: 200px;

            color: white;

            font-weight: bold;

            text-align: center;

 

        }

 

        .up {

            background-color: blue;

            /* transform-origin: top; */

            transform: translateZ(100px);

 

        }

 

        .down {

            background-color: blueviolet;

            transform: translateZ(-100px);

            /* transform-origin: bottom; */

        }

 

        .left {

            background-color: brown;

            /* transform-origin: left; */

            transform: translateY(-100px) rotateX(90deg);

        }

 

        .right {

            background-color: cadetblue;

            transform: translateY(100px) rotateX(-90deg);

            /* transform-origin: right; */

        }

 

        .forward {

            background-color: skyblue;

            transform: translateX(-100px) rotateY(90deg);

        }

 

        .back {

            background-color: pink;

            transform: translateX(100px) rotateY(90deg);

        }


 

        /* @keyframes animate1 {

            0% {

                transform: rotateX(0deg) rotateY(0deg);

            }

 

            100% {

                transform: rotateX(360deg) rotateY(360deg);

            } */

 

        input:nth-child(1):hover~.main>.squre {

            transform: rotateX(0deg) rotateY(0deg);

        }

 

        input:nth-child(2):hover~.main>.squre {

            transform: rotateX(90deg) rotateY(0deg);

        }

 

        input:nth-child(3):hover~.main>.squre {

            transform: rotateX(180deg) rotateY(0deg) rotate(180deg);

        }

 

        input:nth-child(4):hover~.main>.squre {

            transform: rotateX(270deg) rotateY(0deg);

        }

 

        input:nth-child(5):hover~.main>.squre {

            transform: rotateX(0deg) rotateY(90deg);

        }

 

        input:nth-child(6):hover~.main>.squre {

            transform: rotateX(0deg) rotateY(-90deg);

        }

 

        input:nth-child(1):hover~.main>.clickarea>li:nth-child(1){

            border: 2px solid skyblue;

        }

 

        input:nth-child(2):hover~.main>.clickarea>li:nth-child(2) {

            border: 2px solid skyblue;

        }

        input:nth-child(3):hover~.main>.clickarea>li:nth-child(3) {

            border: 2px solid skyblue;

        }

        input:nth-child(4):hover~.main>.clickarea>li:nth-child(4) {

            border: 2px solid skyblue;

        }

        input:nth-child(5):hover~.main>.clickarea>li:nth-child(5) {

            border: 2px solid skyblue;

        }

        input:nth-child(6):hover~.main>.clickarea>li:nth-child(6) {

            border: 2px solid skyblue;

        }

 

    </style>

</head>

 

<body>

    <input type="radio" name="radio" id="radio1">

    <input type="radio" name="radio" id="radio2">

    <input type="radio" name="radio" id="radio3">

    <input type="radio" name="radio" id="radio4">

    <input type="radio" name="radio" id="radio5">

    <input type="radio" name="radio" id="radio6">

 

    <div class="main">

        <ul class="clickarea">

            <li>

                <label for="radio1">

                    <img src="./pic/chang_1.jpg" width="80px" height="30px" alt="">

                </label>

            </li>

            <li>

                <label for="radio2">

                    <img src="./pic/chang_2.jpg" width="80px" height="30px" alt="">

                </label>

            </li>

            <li>

                <label for="radio3">

                    <img src="./pic/boren_chang_1.jpg" width="80px" height="30px" alt="">

                </label>

            </li>

            <li>

                <label for="radio4">

                    <img src="./pic/kakaxi_chang_2.jpg" width="80px" height="30px" alt="">

                </label>

            </li>

            <li>

                <label for="radio5">

                    <img src="./pic/mingren_chang_4.jpg" width="80px" height="30px" alt="">

                </label>

            </li>

            <li>

                <label for="radio6">

                    <img src="./pic/kakaxi_chang_3.jpg" width="80px" height="30px" alt="">

                </label>

            </li>

        </ul>

 

        <div class="squre">

            <div class="up">

                <img src="./pic/mingren2.jpg" width="200px" height="200px" alt="">

            </div>

            <div class="down">

                <img src="./pic/mingren_t_zheng_2.jpg" width="200px" height="200px" alt="">

            </div>

            <div class="left">

                <img src="./pic/woailuo_zheng_1.jpg" width="200px" height="200px" alt="">

            </div>

            <div class="right">

                <img src="./pic/mingren1.jpg" width="200px" height="200px" alt="">

            </div>

            <div class="forward">

                <img src="./pic/mingren_zheng_5.jpg" width="200px" height="200px" alt="">

            </div>

            <div class="back">

                <img src="./pic/mingren_t_zheng_2.jpg" width="200px" height="200px" alt="">

            </div>

        </div>

    </div>

</body>

 

</html>

-----------------------------------------------------我是分割线----------------------------------------------------------------------------------

 

爱吃猪的小白菜、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css旋转立方体教程,如何通过CSS3实现旋转立方体
weixin_28691741的博客
08-04 967
主要通过CSS3中transform属性实现，首先给元素设置成3D元素，然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立方体效果如今随着CSS3的不断成熟和发展，我们可以利用CSS3变换样式，translateZ，rotateX，rotateY，rotateZ，径向渐变，线性渐变，透视等属性创建一个可以旋转的3D立方体。接下来在文章中将为大家具体介绍如何通过CSS3实现这...
CSS3自动旋转正方体3D特效
07-28
在3D正方体旋转特效中，我们通常会将一个正方形的六个面分别分配到XYZ轴的正面、背面、左面、右面、上面和下面，通过调整这些面的相对位置和角度，模拟出一个立体的正方体。关键在于如何巧妙地使用`perspective`属性...
python实现鱼眼图与六面图的转换
yi_777的博客
03-17 845
python实现鱼眼图与六面图的转换 https://github.com/sunset1995/py360convert
CSS3动画实现六面小方块旋转
qq_41131754的博客
03-16 325
话不多说，直接上代码！！！ * { margin: 0; padding: 0; } .wrapper { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-top: -100px; margin-left: -100p...
css3样式实现正方体旋转效果
critans的博客
10-15 735
css实现正方体旋转效果
CSS3魔方旋转图片切换展示特效
07-14
魔方通常由六个可旋转的面组成，为了实现这一效果，我们需要创建多个相对定位的子元素，每个代表立方体的一个面，并应用相应的3D变换。通过JavaScript或者jQuery等库，我们可以监听用户的交互事件，改变这些子元素的...
纯css3 3D图片立方体旋转动画特效
09-08
本主题聚焦于“纯CSS3 3D图片立方体旋转动画特效”，这是一项利用CSS3的新特性实现的高级技巧，它可以为网页增添生动、动态的视觉体验。 首先，我们来详细探讨CSS3中的3D变换。CSS3的3D变换允许开发者创建出具有...
CSS3 3D骰子翻转旋转动画
05-01
一个简单的骰子可能由六个面组成，每个面代表一个数字。可以使用`div`元素创建这些面，并将它们定位在3D空间的正确位置。每个面都有自己的CSS类，以便于应用不同的样式和动画。 接下来，我们使用CSS来定义骰子的...
磁力链磁力链磁力链.txt
最新发布
07-22
磁力链
“人力资源+大数据+薪酬报告+涨薪调薪”
07-22
人力资源+大数据+薪酬报告+涨薪调薪，在学习、工作生活中，越来越多的事务都会使用到报告，通常情况下，报告的内容含量大、篇幅较长。那么什么样的薪酬报告才是有效的呢？以下是小编精心整理的调薪申请报告，欢迎大家分享。相信老板看到这样的报告，一定会考虑涨薪的哦。
安装graphviz和pygraphviz
07-22
pygraphviz 是一个Python库，它是Graphviz图形可视化软件的Python接口。Graphviz是一个开源的图形可视化软件，广泛用于创建和编辑有向图和无向图。pygraphviz使得Python开发者能够轻松地创建和操作图形，以及执行图形的布局和可视化。 一、pygraphviz的主要功能 创建和编辑图形：pygraphviz允许开发者通过Python代码来创建图形，包括添加节点、边等元素，并且可以编辑这些元素的属性，如颜色、形状、标签等。 图形布局：pygraphviz支持多种图形布局算法，如dot、neato、circo等，开发者可以根据需要选择合适的算法来优化图形的布局。 图形可视化：pygraphviz可以将创建和编辑好的图形保存为图片文件，支持多种图片格式，如PNG、JPEG等，方便开发者进行展示和分享。
BrainF**k Devlopment Toolkit
07-22
BrainF**k Devlopment Toolkit(BFDTK)，可用于开发BrainF**k程序。
基于UC3875控制的大功率全桥开关电源设计（提供原理图、PCB图）
07-22
基于UC3875控制的大功率全桥开关电源设计（提供原理图、PCB图） 1、使用UC3875为控制芯片； 2、NCP1253为辅助电源设计，输出12V，给控制芯片供电； 3、UC3845做BOOST升压控制，实现市电整流升压到400V； 4、全桥拓扑设计结构； 5、后级输出同步整流设计； 6、过压硬件保护电路； 7、过流硬件保护电路； 8、提供原理图、PCB图；
毕业设计javajsp大学兼职信息网sqlserver-qp源码含文档工具包
07-22
毕业设计javajsp大学兼职信息网sqlserver-qp源码含文档工具包 页面是jsp，数据库sqlserver，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 （1）网站前台功能： A、信息搜索功能（分类检索） B、用户登录、注册 C、查看发布兼职信息 D、预定兼职 E、个人简历的编辑（也可以上传自己制作的简历） F、用户投诉 G、留言版 H、新闻公告（职场资讯） I、职场攻略（包含面试技巧以及简历指导） （2）管理员后台功能： A、用户信息管理
磁力链,Magnet2Torrent - 磁力链转种子利器
07-22
磁力链,Magnet2Torrent —— 磁力链转种子利器
mvn install jar in repository
07-22
maven将jar包安装到本地仓库的小工具，可批量导入，需配置好JAVA_HOME和MAVEN_HOME环境
巴比达内网穿透.docx
07-22
内网穿透，也被称为内网映射或NAT穿透，是一种网络技术，旨在实现位于不同局域网（内网）中的设备通过公网（外网）进行相互通信。以下是关于内网穿透的详细介绍： 一、定义与原理 定义：内网穿透是一种技术手段，通过该手段，内网（如公司局域网、家庭网络）中的设备能够被外网（如互联网）上的其他设备访问。 原理：内网穿透技术通常依赖于地址和端口的转换，以及在某些情况下，利用反向代理或隧道技术来打破内外网络的壁垒。具体来说，它可以将内网的IP地址和端口映射到公网上的一个地址和端口上，使得外网设备能够通过这个公网地址和端口来访问内网设备。 二、实现方式 内网穿透可以通过多种方式实现，包括但不限于以下几种： 端口映射：在路由器或防火墙上设置端口映射规则，将公网上的某个端口映射到内网设备的某个端口上。这种方式较为简单，但通常需要路由器具有端口映射功能。 反向代理：在内网中设置反向代理服务器，该服务器负责接收外网的请求，并将其转发到内网的目标设备上。反向代理服务器还可以处理内网设备对外网设备的响应，并将其转发回外网设备。 内网穿透软件：使用专门的内网穿透软件（如Frp、Ngrok、花生壳等），这些软件通常
grafana-clock-panel-2.1.7.any.zip
07-22
grafana-clock-panel-2.1.7.any.zip
css 3D立方体旋转
05-13
- `.front`、`.back`、`.right`、`.left`、`.top` 和 `.bottom` 分别代表立方体的六个面，通过 `transform` 属性设置它们的位置和旋转。 - `@keyframes rotate` 定义一个旋转动画，使得立方体可以不停地旋转。 你...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值