HTML/CSS 3D立方体旋转效果

最新推荐文章于 2023-09-20 18:37:02 发布

Tmil

最新推荐文章于 2023-09-20 18:37:02 发布

阅读量482

点赞数

分类专栏：笔记 HTML/CSS 文章标签： css html

本文链接：https://blog.csdn.net/qq_46067727/article/details/125071005

版权

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		html{
			perspective: 800px;
		}
		.cube{
			width: 400px;
			height: 400px;
			margin: 100px auto;
			transform-style: preserve-3d;
			transform: rotateX(45deg) rotateZ(45deg);
			animation: rotate 10s infinite linear;
		}
		.cube>div{
			width: 400px;
			height: 400px;
			opacity: 0.9;
			position: absolute;
		}
		img{
			vertical-align: top;
		}
		.b1{
			transform: rotateY(90deg) translateZ(200px);
			transform-style: preserve-3d;
		}
		.b2{
			transform: rotateY(-90deg) translateZ(200px);
			transform-style: preserve-3d;
		}
		.b3{
			transform: rotateX(90deg) translateZ(200px);
			transform-style: preserve-3d;
		}
		.b4{
			transform: rotateX(-90deg) translateZ(200px);
			transform-style: preserve-3d;
		}
		.b5{
			transform: translateZ(200px);
			transform-style: preserve-3d;
		}

最低0.47元/天解锁文章

Tmil

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML/CSS 3D立方体旋转效果

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> html{ perspective: 800px; } .cube{ width: 400px; height: 400px; margin: 100px auto; transform-st.
复制链接

扫一扫