首页 > 其他分享 >CSS旋转正方体

CSS旋转正方体

时间:2022-09-03 19:11:14浏览次数:62  
标签:正方体 box style 90deg 100px transform 旋转 divs CSS

  CSS实现一个旋转的正方体,鼠标放上去会自动解体.比较普通的实现,留个记录.(代码里的注释方式写错了)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 600px;
            height: 600px;
            margin: 0 auto;
            transform-style: preserve-3d;
            position: relative;
            animation: run 5s linear infinite; //旋转动画
        }
        @keyframes run {
            0%{
               //旋转动画的开始帧
            }
            100%{
                transform: rotateY(360deg) rotateX(360deg);//旋转动画的结束帧
            }
        }
        
        div {
            transition:1s;//设置div变换的时间
        }
            
        .box div {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            color: whitesmoke;
            opacity: 0.5;//透明度
       
        }

    
        .box div:nth-child(1) {
            background: #F44336;
            transform: translateZ(100px);
        }

        .box div:nth-child(2) {
            background: #9C27B0;
            transform: translateX(-100px) rotateY(-90deg);
        }

        .box div:nth-child(3) {
            background: #3F51B5;
            transform: translateY(-100px) rotateX(90deg);
        }

        .box div:nth-child(4) {
            background: #4CAF50;
            transform: translateY(100px) rotateX(-90deg);
        }

        .box div:nth-child(5) {
            background: #FDD835;
            transform: translateX(100px) rotateY(90deg);
        }

        .box div:nth-child(6) {
            background: #455A64;
            transform: translateZ(-100px);
      
        }

    </style>
</head>
<body>
<div class="box" onm ouseover="showsome()" onm ouseout="goback()">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
</body>
<script>

function showsome(){

var divs =  document.getElementsByClassName('box')[0].children
 divs[0].style.transform='translateZ(200px) '
 divs[1].style.transform='translateX(-200px) rotateY(-90deg)'
 divs[2].style.transform='translateY(-200px) rotateX(90deg)'
 divs[3].style.transform='translateY(200px) rotateX(-90deg) '
 divs[4].style.transform='translateX(200px)  rotateY(90deg)'
 divs[5].style.transform='translateZ(-200px)'


}
function goback(){

var divs =  document.getElementsByClassName('box')[0].children
 divs[0].style.transform='translateZ(100px) '
 divs[1].style.transform='translateX(-100px) rotateY(-90deg)'
 divs[2].style.transform='translateY(-100px) rotateX(90deg)'
 divs[3].style.transform='translateY(100px) rotateX(-90deg) '
 divs[4].style.transform='translateX(100px)  rotateY(90deg)'
 divs[5].style.transform='translateZ(-100px)'
}
</script>
</html>

 

标签:正方体,box,style,90deg,100px,transform,旋转,divs,CSS
From: https://www.cnblogs.com/flangrean/p/16653345.html

相关文章

  • 每个开发人员都应该避免的常见 CSS 错误
    每个开发人员都应该避免的常见CSS错误1️⃣使用像素Px将您的设计锁定为所有屏幕的固定尺寸。您应始终尽可能使用相对测量值,例如em、rem、%等。2️⃣使用一个CSS文......
  • 使用 CSS 悬停菜单 - 分步指南
    使用CSS悬停菜单-分步指南HTML对于HTML,我们有一个类为“menu_item”的div元素,它代表一个菜单项。在“menu_item”中,第一个元素是一个带有标题的span元素。现......
  • 4.CSS盒子模型
    盒子模型 4.1什么是盒子模型margin:外边距border:边框padding:内边距4.2边框1,边框的粗细2,边框的样式3,边框的颜色 /*body总有一个默认的外边距*/ body{  m......
  • CSS知识点复习
    1.CSS 指的是层叠样式表* (Cascading Style Sheets)2.CSS元素选择器:直接元素例如p   id选择器:#name1  类选择器:.类名  通用选择器(*)3......
  • 为 html 设置 Tailwindcss CLI
    为html设置TailwindcssCLI以下是我用来创建基本Tailwaind设置的步骤:在VSCode中打开一个新终端并导航到您要在计算机上创建项目的任何位置(这里是终端命令的一个......
  • 适合初学者的 7 个有趣的 CSS 项目创意和主题 [2022]
    适合初学者的7个有趣的CSS项目创意和主题[2022]任何想成为网页设计师的人都必须了解CSS的重要性。您的网站可以使用CSS进行创造性的设计和布局,使其具有独特的外......
  • HTML、CSS 和 JavaScript 中的所有唯一字符挑战
    HTML、CSS和JavaScript中的所有唯一字符挑战HTML:<divclass="wrapper"><h1>所有独特的字符</h1><br><p>来自<ahref="https://buttondown.email/cassidoo/ar......
  • 如何使用 CSS 和 HTML 创建 Glassmorphism 效果
    如何使用CSS和HTML创建Glassmorphism效果Glassmorphism效果在现代网页设计中越来越流行Glasmorphism是一个有点新的功能,它一直在流行,并且经常在新设计的网站上受......
  • css快速入门-语法
    css从位置上分类:嵌入式样式表,内部样式表,外部样式表在一个标签上写style属性在style属性中写样式属于嵌入式样式表在head中写的style标签属于内部样式表html文件中不写cs......
  • CSS常用属性
    ​ /**作者:呆萌老师*☑csdn认证讲师*☑51cto高级讲师*☑腾讯课堂认证讲师*☑网易云课堂认证讲师*☑华为开发者学堂认证讲师*☑爱奇艺千人名师计划成员*在这里......