web案例-3D旋转魔方和太极

最新推荐文章于 2024-03-30 09:42:51 发布

黄淮~

最新推荐文章于 2024-03-30 09:42:51 发布

阅读量450

点赞数 1

分类专栏：案例文章标签： html css html5

本文链接：https://blog.csdn.net/huanghuai_/article/details/112436122

版权

案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

动画与变形案例

旋转太极

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>太极</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				background-color: darkgray;
			}
			@keyframes taijirotate{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(360deg);
				}
			}
			.taiji{
				margin: 100px;
				width: 0;
				height: 240px;
				border-left: 120px solid white;
				border-right: 120px solid black;
				border-radius:50% ;
				animation: taijirotate 3s linear infinite;
			}
			.taiji::before{
				display: block;
				content: "";
				background-color: white;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				border: 40px solid black;
				margin-left: -60px;
			}
			.taiji::after{
				display: block;
				content: "";
				background-color: black;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				border: 40px solid white;
				margin-left: -60px;
			}
		</style>
	</head>
	<body>
		<div class="taiji">
		
		</div>
	</body>
</html>

3D旋转魔方

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset='gbk'">
        <style>
            /*开启3D视距 如果没有视距 则无法透视出3D效果*/
            body {
                perspective: 5000px;
            }
            @keyframes myanimation {
                from {
                    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
                }
                to {
                    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
                }
            }
            .container {
                width: 200px;
                height: 200px;
                margin: 300px auto;
                position: relative;
                /*以3D显示效果*/
                transform-style: preserve-3d;
                animation: myanimation 5s linear infinite;
            }
            .container>img {
                width: 200px;
                height: 200px;
                position: absolute;
            }
            .container>img:first-child {
                /*底部照片*/
                transform: translateZ(-200px);
            }
            .container>img:last-child {
                /*顶部*/
            }
            .container>img:nth-child(2) {
                /*左边*/
                left:-200px;
                transform-origin: right;
                transform: rotateY(-90deg);
            }
            .container>img:nth-child(3) {
                /*上边*/
                top:-200px;
                transform-origin: bottom;
                transform: rotateX(90deg);
            }
            .container>img:nth-child(4) {
                /*右边*/
                right:-200px;
                transform-origin: left;
                transform: rotateY(90deg);
            }
            .container>img:nth-child(5) {
                /*下边*/
                bottom:-200px;
                transform-origin: top;
                transform: rotateX(-90deg);
            }
            .container:hover img:first-child {
                transform: translateZ(-300px);
            }
            .container:hover img:last-child {
                transform: translateZ(100px);
            }
            .container:hover img:nth-child(2) {
                transform: rotateY(-90deg) translateZ(100px);
            }
            .container:hover img:nth-child(3) {
                transform: rotateX(90deg) translateZ(100px);
            }
            .container:hover img:nth-child(4) {
                transform: rotateY(90deg) translateZ(100px);
            }
            .container:hover img:nth-child(5) {
                transform: rotateX(-90deg) translateZ(100px);
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img src="img/img1.jpg">
            <img src="img/img2.jpg">
            <img src="img/img3.jpg">
            <img src="img/img4.jpg">
            <img src="img/img5.jpg">
            <img src="img/img6.jpg">
        </div>
    </body>
</html>

黄淮~

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
web案例-3D旋转魔方和太极

动画与变形案例旋转太极<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>太极</title> <style> *{ margin: 0; padding: 0; background-color: darkgray; } @keyframes taijirotate{ from{
复制链接

扫一扫