CSS：transform应用之立体魔方案例

最新推荐文章于 2022-05-03 21:56:15 发布
最新推荐文章于 2022-05-03 21:56:15 发布
阅读量185 收藏
点赞数
分类专栏： CSS3 html5 文章标签： html html5 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42204713/article/details/109530096
版权

第一版本

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>立方体动画</title>
	<style type="text/css">
		body{
			/*设置透视点*/
			perspective: 1000px;
		}
		.lifang{
			width: 200px;
			height: 200px;
			margin: 200px auto;
			position: relative;
			/*保留子元素的3D效果*/
			transform-style: preserve-3d;

			/*旋转轴*/
			transform: rotate3d(1,1,1,0deg);
			transition: all 5s;
		}

		.lifang:hover{
			/*旋转轴*/
			transform: rotate3d(1,1,1,720deg);
		}

		.page{
			width: 200px;
			height: 200px;
			position: absolute;	
			left: 0;
			top: 0;
			/*设置透明度*/
			opacity: 0.8;
		}

		.front{
			background-image: url(images/GD.jpg);
			background-size: 100% auto;
			transform: translateZ(100px);
		}

		.back{
			background-image: url(images/GD1.jpg);
			background-size: 100% auto;
			transform: translateZ(-100px);
		}
		.right{
			background-image: url(images/GD2.jpg);
			background-size: auto 100%;
			transform: rotateY(90deg) translateZ(100px);
			
		}

		.left{
			background-image: url(images/GD3.jpg);
			background-size: auto 100%;
			transform: rotateY(-90deg) translateZ(100px);
		}

		.top{
			background-image: url(images/top.jpg);
			background-size: auto 100%;
			transform: rotateX(90deg) translateZ(100px);
			
		}

		.bottom{
			background-image: url(images/GD5.jpg);
			background-size: auto 100%;
			transform: rotateX(-90deg) translateZ(100px);
		}
	</style>
</head>
<body>
	<div class="lifang">
		<div class="page front"></div>
		<div class="page back"></div>
		<div class="page left"></div>
		<div class="page right"></div>
		<div class="page top"></div>
		<div class="page bottom"></div>
	</div>
	
</body>
</html>

在这里插入图片描述
第二版本

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项与魔方</title>
	<style type="text/css">
		body{
			/*设置透视点*/
			perspective: 1000px;
		}
		.lifang{
			width: 200px;
			height: 200px;
			margin: 200px auto;
			position: relative;
			/*保留子元素的3D效果*/
			transform-style: preserve-3d;

			/*旋转轴*/
			transform: rotate3d(1,1,1,0deg);
			transition: all 5s;
		}

		.lifang:hover{
			/*旋转轴*/
			transform: rotate3d(1,1,1,720deg);
		}

		.page{
			width: 200px;
			height: 200px;
			position: absolute;	
			left: 0;
			top: 0;
			/*设置透明度*/
			opacity: 0.8;
		}

		.front{
			background-image: url(images/GD.jpg);
			background-size: 100% auto;
			transform: translateZ(100px);
		}

		.back{
			background-image: url(images/GD1.jpg);
			background-size: 100% auto;
			transform: translateZ(-100px);
		}
		.right{
			background-image: url(images/GD2.jpg);
			background-size: auto 100%;
			transform: rotateY(90deg) translateZ(100px);
			
		}

		.left{
			background-image: url(images/GD3.jpg);
			background-size: auto 100%;
			transform: rotateY(-90deg) translateZ(100px);
		}

		.top{
			background-image: url(images/top.jpg);
			background-size: auto 100%;
			transform: rotateX(90deg) translateZ(100px);
			
		}

		.bottom{
			background-image: url(images/GD5.jpg);
			background-size: auto 100%;
			transform: rotateX(-90deg) translateZ(100px);
		}

		.choose{
			width: 900px;
			height: 300px;
			text-align: center;
			margin: 0 auto;
		}
		.btn{
			display: inline-block;
			width: 100px;
			height: 40px;
			font-size: 20px;
			color: #999;
			border: 1px solid #ccc;
			border-radius: 10px;
			text-align: center;
			line-height: 40px;
		}

		/*
		单选框被选中后，立方体的转动
		*/
		#front:checked~.lifang{
			transform: rotate3d(0,0,0,0deg);
		}

		#back:checked~.lifang{
			transform: rotate3d(0,1,0,180deg);
		}

		#left:checked~.lifang{
			transform: rotate3d(0,1,0,90deg);
		}

		#right:checked~.lifang{
			transform: rotate3d(0,1,0,-90deg);
		}

		#top:checked~.lifang{
			transform: rotate3d(1,0,0,-90deg);
		}
		#bottom:checked~.lifang{
			transform: rotate3d(1,0,0,90deg);
		}

		/*transform:scale(放大的倍数)*/
		#big:checked~.lifang{
			transform: scale(2);
		}

		#small:checked~.lifang{
			transform: scale(0.5);
		}


		/*单选框被选中后，对应的标签按钮的样式*/
		#front:checked~.choose [for="front"]{
			background: #ccc;
			color: #fff;
			box-shadow: 0 0 30px #999999
		}

		#back:checked~.choose [for="back"]{
			background: #ccc;
			color: #fff;
			box-shadow: 0 0 30px #999999
		}

		#left:checked~.choose [for="left"]{
			background: #ccc;
			color: #fff;
			box-shadow: 0 0 30px #999999
		}

		#right:checked~.choose [for="right"]{
			background: #ccc;
			color: #fff;
			box-shadow: 0 0 30px #999999
		}
		#top:checked~.choose [for="top"]{
			background: #ccc;
			color: #fff;
			box-shadow: 0 0 30px #999999
		}

		#bottom:checked~.choose [for="bottom"]{
			background: #ccc;
			color: #fff;
			box-shadow: 0 0 30px #999999
		}

		#big:checked~.choose [for="big"]{
			background: #ccc;
			color: #fff;
			box-shadow: 0 0 30px #999999
		}

		#small:checked~.choose [for="small"]{
			background: #ccc;
			color: #fff;
			box-shadow: 0 0 30px #999999
		}

		

	</style>
</head>
<body>
	
	<input type="radio" name="b1" id="front" value="前面" hidden="hidden">
	<input type="radio" name="b1" id="back" value="后面" hidden="hidden">
	<input type="radio" name="b1" id="left" value="左面" hidden="hidden">
	<input type="radio" name="b1" id="right" value="右面" hidden="hidden">
	<input type="radio" name="b1" id="top" value="上面" hidden="hidden">
	<input type="radio" name="b1" id="bottom" value="下面" hidden="hidden">
	<input type="radio" name="b1" id="big" value="放大" hidden="hidden">
	<input type="radio" name="b1" id="small" value="缩小" hidden="hidden">

	<!-- 魔方 -->
	<div class="lifang">
		<div class="page front"></div>
		<div class="page back"></div>
		<div class="page left"></div>
		<div class="page right"></div>
		<div class="page top"></div>
		<div class="page bottom"></div>
	</div>

	<div class="choose">
		<label for="front" class="btn">前面</label>
		<label for="back" class="btn">后面</label>
		<label for="left" class="btn">左面</label>
		<label for="right" class="btn">右面</label>
		<label for="top" class="btn">上面</label>
		<label for="bottom" class="btn">下面</label>
		<label for="big" class="btn">放大</label>
		<label for="small" class="btn">缩小</label>
	</div>
	
</body>
</html>

在这里插入图片描述

Camille-Fan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
打印魔方以及CSS：transform使用
weixin_42491786的博客
10-17 164
旋转-魔方事例之打印魔方 该示例主要使用CSS：transform样式(先建立transform-style坐标系) rotate() //围绕X-Y-Z轴旋转 可拆分为rotateX()、rotateY()、rotateZ() // 注意以deg 为单位 如15deg translate() /围绕X-Y-Z轴移动（此处的移动是幕布的移动，正数渐近、负数渐远） 可拆分为translateX()、translateY()、translateZ(
css3之3d变形transform - 立方体效果
09-01 482
1. 立方体的上下： .cubeBottom{ transform: rotateX(90deg) ; transform-origin:center bottom ; /* :绕x旋转，主要确定y的高度 ： right bottom , 1px 300px, 2px 300px,.. 100...
transform实现简单3D立体正方体旋转
qq_44472790的博客
11-28 1007
初始效果图 html <div class="box-parent"> <span class="box-children">1</span> <span class="box-children">2</span> <span class="box-children">3</span> <span class="box-children">4</span&
transform 属性 实现3D立体相册
小小的前端
06-02 232
属性简介 perspective 属性 perspective 属性 指定了观察者与 z = 0 平面的距离，使具有三维位置变换的元素产生透视效果。 transform-style 属性 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中变换。 translateZ() 函数 修改元素 z轴 在三维空间的位置。 rotateX() 、rotateY() 函数 rotateX()元素围绕 x轴 旋转。rotateY()元素围绕 y轴 旋转。 animation 属性 为元素
CSS3 transform动画 3D旋转立体正方形
weixin_44167504的博客
09-07 2014
CSS3 transform动画 旋转立体正方形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>立体正方形</title> <style> #box {
rubicks_cube:CSS 和 JS 中的魔方
07-04
使用CSS3的transform属性，可以实现面的平移、旋转和缩放，模拟魔方的运动。同时，为了使动画流畅，可能还会涉及到requestAnimationFrame API。 JavaScript部分可能会有一个或多个函数来处理旋转操作，这些函数会...
立体魔方CSS3动画网页特效.rar
最新发布
11-17
CSS3的`transform`属性在创建立体魔方特效中扮演着核心角色。它可以用来改变元素的大小、位置和形状，其中的`rotateX()`, `rotateY()`, 和 `rotateZ()`函数分别用于沿着X、Y、Z轴进行旋转。为了实现魔方的翻转效果，...
抖音超火❤ html+css+js 实现炫酷3D魔方
12-29
例如，当用户点击或拖动某个面时，JS会计算出相应的旋转角度，并使用CSS3的transform函数来更新对应的CSS属性，实现魔方的动态转动。同时，JS还可以处理其他复杂逻辑，如防止超出旋转范围、保持相邻面的同步等。 ...
css 3D魔方 （可拖动）
01-03
7. **交互与事件**：尽管这个案例是纯CSS实现，但实际应用中，我们可能会用JavaScript来监听用户的鼠标拖动事件，动态更新CSS3的变换属性，实现更流畅的交互体验。 8. **性能优化**：大量使用3D变换可能会影响页面...
纯CSS3实现3D魔方翻转动画特效.zip
11-25
例如，通过改变CSS3的transform属性值，可以控制魔方各个面的旋转状态，从而实现翻转效果。 最后，CSS是层叠样式表，用于定义网页的布局和外观。在这个项目中，CSS3的keyframes规则可以创建复杂的动画效果。通过...
css3 transform+折扇案例+魔方案例
weixin_38730820的博客
03-22 196
css3 2D属性 变形属性 transform:; 2D变换: 在平面空间的位移transform:translate(); 旋转 transform:rotate(); 缩放 transform:scale(); 倾斜 transform:skew(); 位移: transform:transla...
HTML5 transform三维立方体（带旋转效果）
aperson111的专栏
08-22 7278
为了更好得掌握transform的精髓，所以决定完成三维立方体的模型，可以实现360无死角的三维旋转效果。 但是旋转时判断每个面的视图顺序比较困难，仍未完美解决，希望有人能解答！ 源码直接贡献啦： .cuboid_side_div{ position:absolute; border:1px solid #333; -webkit-transition:ease all
简单说 用CSS做一个魔方旋转的效果
热门推荐
FEWY的博客
07-15 3万+
说明魔方大家应该是不会陌生的，这次我们来一起用CSS实现一个魔方旋转的特效，先来看看效果图！ 解释我们要做这样的效果，重点在于怎么把6张图片，摆放成魔方的样子，而把它们摆放成魔方的样子，重点在于用好CSS的transform，这是非常重要的，好的，我们先拼出一个魔方的样子。 效果图 代码（代码比较长，朋友们可以直接粘贴复制到电脑看效果）&amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt;
用CSS实现3D魔方动画旋转
Yvan_Lin的博客
04-30 3299
这篇博客是关于一个动态3D魔方的实现，主要分成两个部分，一个是3D魔方的制作，另一个是关于一个动画效果
transform的3D效果实现
wqxiaongqi的博客
05-04 5081
一：立方体及其旋转效果原理：构建一个立方体，四方体共有六个面，采用定位及其位移旋转实现。&lt;div class="rect-wrap"&gt;      &lt;div class="container"&gt;          &lt;div class="top slide"&gt;&lt;img src="images/17.jpg" title="
css3绘制魔方transform-style: preserve-3d，translateZ，rotateX的使用
张宇的博客
06-03 1132
css3绘制魔方 上代码，上菜 主要使用了css3的 transform-style: preserve-3d;的使用，通过把元素转换为3d属性的结构，对应的添加了Z轴的属性，生成6个div使其重叠在一起，然后使用tr
深入理解CSS变形transform(3d)
weixin_33744141的博客
04-07 481
前面的话 　　本文将详细介绍关于transform变形3D的内容，但需以了解transform变形2D为基础。3D变形涉及的属性主要是transform-origin、transform、transform-style、perspective、perspective-origin、backface-visibility   坐标轴 　　在了解透视之前，首先要先了解坐标轴。3D变形与2D变...
如何用CSS制作可以转动的魔方
curry_xiao的博客
05-03 869
三阶魔方想要进行转动因为太过复杂，所以这里用的是2阶魔方。 首先要搭建一个魔方。利用6个div盒子不同的空间旋转，拼出一个小正方体。然后改变正方体的空间位置，一共8个小正方体拼成2阶魔方。最后给小正方体的每一个面上一个颜色。
HTML表白器---做一个魔方旋转的效果
风吹屁屁凉
08-08 5163
说明 魔方大家应该是不会陌生的，这次我们来一起用CSS实现一个魔方旋转的特效，先来看看效果图！ 解释 我们要做这样的效果，重点在于怎么把6张图片，摆放成魔方的样子，而把它们摆放成魔方的样子，重点在于用好CSS的transform，这是非常重要的，好的，我们先拼出一个魔方的样子。 代码： <!DOCTYPE html> <html> <h...
css样式will-change:transform
05-09
`will-change: transform`是一种CSS属性，用于告诉浏览器某个元素将要进行哪些变化，以便浏览器可以提前做好优化准备。在这种情况下，它告诉浏览器某个元素将要进行变换操作，如平移、旋转、缩放等。使用`will-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值