精华内容
下载资源
问答
  • 2019-09-15 11:11:37
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>动画立方体</title>
    	<style type="text/css">
    		.cube{
    			width: 100px;
    			height: 100px;
    			margin:50px;
    			-webkit-transform-style: preserve-3d;
    			transform-style: preserve-3d;
                animation:rotate 5s infinite alternate;
    		}
    		.cube > div{
    			width:100%;
    			height: 100%;
    			background:rgba(255,255,255,.1);
    			box-shadow: 0 0 5px inset rgba(0,0,0,.2);
    			color: gray;
    			text-align: center;
    			line-height: 100px;
    			backface-visibility: visible;
    			position:absolute;
    		}
    		.cube .front{
    			/*background-color:red;*/
    			-webkit-transform:translateZ(50px);
    			transform:translateZ(50px);
    		}
    		.cube .back{
    			/*background-color:orange;*/
    			-webkit-transform: rotateX(180deg) translateZ(50px);
    			transform: rotateX(180deg) translateZ(50px);
    		}
    		.cube .left{
    			/*background-color:yellow;*/
    			-webkit-transform:rotateY(90deg) translateZ(50px);
    			transform: rotateY(90deg) translateZ(50px);
    		}
    		.cube .right{
    			/*background-color:green;*/
    			-webkit-transform:  rotateY(-90deg) translateZ(50px);
    			transform: rotateY(-90deg) translateZ(50px);
    		}
    		.cube .top{
    			/*background-color:blue;*/
    			-webkit-transform: rotateX(90deg) translateZ(50px);
    			transform: rotateX(90deg) translateZ(50px);
    		}
    		.cube .bottom{
    			/*background-color:cyan;*/
    			-webkit-transform:  rotateX(-90deg) translateZ(50px);
    			transform: rotateX(-90deg) translateZ(50px);
    		}
    		@keyframes rotate{
    			from {transform:rotateY(0deg) rotateX(0deg);}
               	to{transform:rotateY(360deg) rotateX(360deg);}
    		}
    	</style>
    </head>
    <body>
    	<div class="cube">
    		<div class="front">1</div>
    		<div class="back">2</div>
    		<div class="left">3</div>
    		<div class="right">4</div>
    		<div class="top">5</div>
    		<div class="bottom">6</div>
    	</div>
    </body>
    </html>

     

    更多相关内容
  • css 旋转立方体

    2021-08-05 00:12:02
    1.需要了解相关css样式1.position属性 值:relative\absolute;/* position进行定位,父元素的position属性值为relative相对定位,子元素的position属性值为absolute相对定位*/position:relative;position:absolute;2...

    1.需要了解相关css样式

    1.position属性 值:relative\absolute;

    /* position进行定位,父元素的position属性值为relative相对定位,子元素的position属性值为absolute相对定位*/

    position:relative;

    position:absolute;

    2.transform-style属性 值:flat\preserve-3d;

    /* transform-style在3d的情况下是否以3d的方式呈现,值flat子元素不保留3d的位置,preserve-3d子元素保留3d位置,呈现3d形式*/

    transform-style:preserve-3d;

    3.perspective属性 值:number\none;

    /* 当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身,perspective 属性只影响 3D 转换元素 */

    perspective:600;

    4.动画animation属性

    /* animation: 动画的名称 完成动画的时间 动画的速度 循环播放*/

    animation: rotate 4s liner infinite;

    /*定义关键帧@keyframes 动画的名字*/

    @keyframes rotate{

    0%{

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

    }

    100%{

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

    }

    }

    5.nth-child(n)选择器;

    .box:nth-child(2);

    /*选择第二个.box*/

    6.transition属性

    /*过渡属性 完成过渡的时间*/

    transition:0.5s;

    7.transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

    transform:rotate();/*定义2d旋转角度*/

    transform:rotateX(90deg);/沿着X轴旋转90度,定义3d旋转*/

    transform:rotateY(90deg);/沿着X轴旋转90度,定义3d旋转*/

    translateX(x)/*定义转换,只是用 X 轴的值。*/

    translateY(y)/*定义转换,只是用 Y 轴的值。*/

    translateZ(z)/*定义 3D 转换,只是用 Z 轴的值。*/

    效果显示

    代码

    Document

    body{

    background-color: #4b8bf4;

    }

    .wrap{

    width: 200px;

    height: 200px;

    position: relative;

    margin: 150px auto;

    transform-style:preserve-3d;

    animation: rotate 4s linear infinite;

    perspective: 600;

    }

    .box{

    width: 200px;

    height: 200px;

    position: absolute;

    transition: 0.5s;

    }

    .box:nth-child(1){

    background: url(./img/1.jpg);

    transform: rotateX(90deg) translateZ(100px);

    }

    .box:nth-child(2){

    background: url(./img/2.jpg);

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

    }

    .box:nth-child(3){

    background: url(./img/3.jpg);

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

    }

    .box:nth-child(4){

    background: url(./img/4.jpg);

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

    }

    .box:nth-child(5){

    background: url(./img/5.jpg);

    transform: translateZ(100px);

    }

    .box:nth-child(6){

    background: url(./img/6.jpg);

    transform: translateZ(-100px);

    }

    @keyframes rotate {

    0%{

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

    }

    100%{

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

    }

    }

    .wrap:hover .box:nth-child(1){

    transform: rotateX(90deg) translateZ(200px);

    }

    .wrap:hover .box:nth-child(2){

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

    }

    .wrap:hover .box:nth-child(3){

    transform: rotateY(90deg) translateZ(200px);

    }

    .wrap:hover .box:nth-child(4){

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

    }

    .wrap:hover .box:nth-child(5){

    transform:translateZ(200px);

    }

    .wrap:hover .box:nth-child(6){

    transform:translateZ(-200px);

    }

    .bot{

    width: 80px;

    height: 80px;

    position: absolute;

    top: 50%;

    margin-top: -40px;

    left: 50%;

    margin-left: -40px;

    }

    /* ?为什么从7开始,:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。*/

    .bot:nth-child(7){

    background: url(./img/7.jpg);

    transform: rotateX(90deg) translateZ(40px) ;

    }

    .bot:nth-child(8){

    background: url(./img/7.jpg);

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

    }

    .bot:nth-child(9){

    background: url(./img/7.jpg);

    transform: rotateY(90deg) translateZ(40px);

    }

    .bot:nth-child(10){

    background: url(./img/7.jpg);

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

    }

    .bot:nth-child(11){

    background: url(./img/7.jpg);

    transform: translateZ(40px);

    }

    .bot:nth-child(12){

    background: url(./img/7.jpg);

    transform: translateZ(-40px);

    }

    展开全文
  • css旋转立方体

    2021-11-16 19:51:26
    旋转立方体

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>旋转立方体</title>
        <style>
            .stage{
      position: relative;
      perspective: 800px;
    }
    @keyframes rotate-frame{
    	0% {
    		transform: rotateX(0deg);
    	}
    	25% {
    		transform: rotateX(180deg);
    	}
    	50% {
    		transform: rotateX(360deg) rotateY(0deg);
    	}
    	75% {
    		transform: rotateX(360deg) rotateY(180deg);
    	}		
    	100% {
    		transform: rotateX(360deg) rotateY(360deg);
    	}
    }
    .container{
    	width: 450px;
    	height: 450px;
    	transform-style:preserve-3d;
      animation: rotate-frame 8s infinite linear;
      transform-origin: 50% 50% 75px;
      /*background: yellow;   容器屏幕背景色*/
    }
    .side{
      width: 150px;
      height: 150px;
      position: absolute;
      box-shadow: inset 0 0 20px rgba(0,0,0,0.9);
      text-align: center;
      line-height: 150px;
    }
    .top{
      left: 150px;
      top: 0;
      transform: rotateX(-90deg);
      transform-origin: bottom;
    }
    .bottom{
      left: 150px;
      top: 300px;
      transform: rotateX(90deg);
      transform-origin: top;
    }
    .left{
      left: 0;
      top: 150px;
      transform: rotateY(90deg);
      transform-origin: right;
    }
    .right{
      left: 300px;
      top: 150px;
      transform: rotateY(-90deg);
      transform-origin: left;
    }
    .front{
      left: 150px;
      top: 150px;
      transform: translateZ(150px);
    }
    .back{
      left: 150px;
      top: 150px;
    }
    img{
        width: 150px;
        height: 150px;
    }
        </style>
    </head>
    <body>
        <div class="stage">
            <div class="container">
              <div class="side top"><img src="图/mirror.JPG" alt="">  </div>
              <div class="side bottom"><img src="图/Prada.JPG" alt=""></div>
              <div class="side left"><img src="图/sleep.JPG" alt=""></div>
              <div class="side right"><img src="图/eat.JPG" alt=""></div>
              <div class="side front"><img src="图/read.JPG" alt=""></div>
              <div class="side back"><img src="图/takeTheShower.JPG" alt=""></div>
            </div>
          </div>
    </body>
    </html>

    展开全文
  • css+html+js 实现的一个旋转立方体相册,有背景音乐(自动循环播放,无需点击),音乐和照片可以替换,代码简单,小白也可以看懂并修改。非常nice!!!曾经有一份真挚的感情放在我的面前,我没有好好的珍惜,等到...
  • 通过CSS3实现旋转立方体的方法发布时间:2020-08-27 14:18:45来源:亿速云阅读:78作者:小新这篇文章将为大家详细讲解有关通过CSS3实现旋转立方体的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读...

    通过CSS3实现旋转立方体的方法

    发布时间:2020-08-27 14:18:45

    来源:亿速云

    阅读:78

    作者:小新

    这篇文章将为大家详细讲解有关通过CSS3实现旋转立方体的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

    主要通过CSS3中transform属性实现,首先给元素设置成3D元素,然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立方体效果

    如今随着CSS3的不断成熟和发展,我们可以利用CSS3变换样式,translateZ,rotateX,rotateY,rotateZ,径向渐变,线性渐变,透视等属性创建一个可以旋转的3D立方体。

    0f6451c10cfba3c03664d86582676221.png

    【推荐课程:CSS3教程】

    在立方体内部是六个侧面,它们被定义为单独的图形元素,每个元素具有单独的“后”,“顶”,“底”,“左”,“右”和“前”。所以首先我们要创建html代码。包含这六个元素。如下代码所示

    然后设置box的CSS属性,以及将它设置为3D元素。在这里需要注意要设置定位,目的是让六个元素可叠加在一起.box{

    position: relative;

    width:200px;

    height:200px;

    transform-style: preserve-3d;/*创造3D空间*/

    -webkit-transform-style: preserve-3d;

    transition: all 5s linear;

    }

    接下来就要设置立方体的六个面.box div{

    width:200px;

    height: 200px;

    position: absolute;

    left: 0;

    top: 0;

    transform-style: preserve-3d;

    -webkit-transform-style: preserve-3d;

    border: 1px solid #46B8DA;

    opacity: 0.5;

    }

    六个面的公共部分设置完了,接下来就要设置这六个面的3d效果,我们可以通过transform 属性来设置3D变化,它可以允许我们对元素进行旋转,移动,倾斜等.one{

    transform: rotateY(0deg) translateZ(100px);

    background-color:rgb(255,118,19);

    }

    .two{

    transform: rotateY(180deg) translateZ(100px);

    background-color:rgb(231,78,72);

    }

    .three{

    transform: rotateX(90deg) translateZ(100px);

    background-color: rgb(75,165,165);

    }

    .four{

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

    background-color:rgb(129,182,62);

    }

    .five{

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

    background-color: rgb(255,118,19);

    }

    .six{

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

    background-color:rgb(244,208,114);

    }

    这样我们的立方体就做好了,当鼠标移上去的时候就会发生旋转.box:hover{

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

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

    }

    效果图:

    d849d1de99475b0fee0fde2d0d4b59ab.png

    关于通过CSS3实现旋转立方体的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

    展开全文
  • 纯纯用css就可以写出会自己旋转的3D立方体! 首先需要了解几个属性: transform 变形 translate 位移 rotate 旋转 perspective 透视 transform-style:preserve-3d 开启立体呈现 定义动画: @keyframes name{ ...
  • 旋转立方体的效果   分析 一个容器包含6个div position:absolute 之后6个面完全重合 通过trandform:rotateX/Y/Z(),translateX/Y/Z()调整到相应位置 添加transition动画效果 注意这里面的旋转是绕着他的中心...
  • 主要通过CSS3中transform属性实现,首先给元素设置成3D元素,然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立方体效果如今随着CSS3的不断成熟和发展,我们可以利用CSS3变换样式,translateZ,...
  • css3 立方体旋转效果

    2021-06-02 16:11:35
    meta name="description" content="css3实现的3D旋转立方体盒子"> <meta charset="utf-8"> <title>旋转立方体</title> <style type="text/css"> .stage{ position: relative; ...
  • CSS制作立方体自动旋转相册

    千次阅读 2020-01-13 20:16:46
    关键是还能让女朋友开心,那么我们来简单的说一下如何利用CSS3当中的动画属性来制作立方体旋转效果; 首先我先展示一下我给女朋友做的一个旋转相册效果: 效果链接入口 运用的CSS属性及方法: 利用transform...
  • CSS3立方体旋转发光动画特效是一款纯CSS3制作的3D效果的立方体翻转特效。
  • css3D旋转立方体

    千次阅读 2018-10-15 15:18:47
    3D旋转效果主要使用了CSS3 transform 属性 首先我们先完善布局 要想完成一个立方体,首先我们要有一个参考界面,也就是立方体的核心 如图,标注区域就是我们的核心区,立方体的每个界面都是以核心为参考系 核心区域只...
  • CSS3立方体3D旋转加载动画,纯CSS3代码,3D立方体组合旋转动画,3D立方体组合旋转拆分动画。
  • 用图: 效果图: 代码: <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8">...metaname="viewport"content="width=device-width,initial-scale=1.0">...
  • CSS 3D立方体旋转

    2021-12-20 15:31:38
    1.效果如图 2.上码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">... .
  • CSS3 3D旋转立方体动画
  • 基于css3的3D立方体旋转特效
  • /*开启3D效果*/ /*animation: 旋转立方体 执行时间 [动画延迟时间 动画运动曲线 运动次数 是否反向执行 是否保留最后一帧];*/ animation: roll 8s linear infinite;/*3D效果默认关闭\infinite无限次执行、linear匀速...
  • 通过实例代码给大家介绍了利用CSS实现立方体360度旋转效果的方法,实现后的效果非常炫酷,而且实现的代码非常简单,对大家的理解和学习很有帮助,有需要的朋友们下面来一起看看吧。
  • css练习-旋转立方体

    2021-06-26 05:01:47
    1. 建立HTML结构立方体有六个面,分别使用六个div外面使用wrap容器包裹,作为整体,用来执行旋转动画2. 整体样式body {perspective: 1000px;}.wrap {position: relative;width: 200px;height: 200px;margin: 200px ...
  • CSS3立方体3D旋转加载动画,纯CSS3代码,3D立方体组合旋转动画,3D立方体组合旋转拆分动画。
  • css3 立方体

    2018-10-08 16:49:48
    该html代码可以实现立方体,而且该立方体是用纯css3编辑的,还可以旋转
  • CSS3-3D动画制作旋转立方体 3D动画是CSS3才有的属性,制作立方体的思路是使用6个正方形div,通过绝对定位+旋转+位移来合成一个立方体。然后再使父亲旋转。 旋转后的面会变成新的X-Y面,旋转后Z轴和位移是对新的面来...
  • CSS3立方体旋转发光动画特效是一款纯CSS3制作的3D效果的立方体翻转特效。
  • 实现一个旋转立方体,只需要用css的基本属性就可以实现。我们一起看看吧~ 一:transform 基本属性 transform可以实现元素的2D或3D转换,可以对元素进行旋转,缩放,移动,倾斜等。 基本属性有: 1. 移动 ...
  • 本文通过原生JS,点击事件,鼠标按下、鼠标抬起和鼠标移动事件,实现3D立方体的拖动旋转,并将旋转角度实时的反应至界面上显示。 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴、Y轴...
  • 3D旋转立方体(HTML+CSS3)源码 主要知识点:css3的transform,rotate,translate,animation等动画, 以perspective,transform-style等属性为辅助

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,090
精华内容 1,236
关键字:

css旋转立方体