用CSS3实现立方体

最新推荐文章于 2024-08-31 21:49:18 发布

ccaihua

最新推荐文章于 2024-08-31 21:49:18 发布

阅读量189

点赞数 1

文章标签： css3 html

本文链接：https://blog.csdn.net/ccaihua/article/details/105103073

版权

本文介绍如何使用CSS3创建一个3D立方体，展示了一个立方体的实现效果。

摘要由CSDN通过智能技术生成

用CSS3实现立方体

	先设置一个父元素，使用定位将子元素像扑克牌堆叠在父元素上，再将子元素进行相应的位移，旋转方可得一个立方体。设置动画效果，使立方盒自动旋转，当鼠标碰到时停止旋转。
	代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
   margin:0;padding:0px;}
			.box{
   
				width:400px;
				height:400px;
				margin:500px auto;
				position:relative;/*定位*/
				transform-style:preserve-3d;/*形成3D空间，给父级元素添加*/
			}
			.box div{
   
				width:400px;
				height:400px

最低0.47元/天解锁文章

ccaihua

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用CSS3实现立方体

用CSS3实现立方体先设置一个父元素，使用定位将子元素像扑克牌堆叠在父元素上，再将子元素进行相应的位移，旋转方可得一个立方体。设置动画效果，使立方盒自动旋转，当鼠标碰到时停止旋转。代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title><...
复制链接

扫一扫