CSS制作3D旋转正方体

最新推荐文章于 2022-06-14 15:41:56 发布

口袋妖怪叶藤蛇

最新推荐文章于 2022-06-14 15:41:56 发布

阅读量232

点赞数 1

分类专栏：小玩意文章标签： css

本文链接：https://blog.csdn.net/pokemonsnivy/article/details/111504628

版权

本文详细介绍了如何利用CSS3的transform属性和perspective属性创建一个可以旋转的3D正方体效果，包括边框、背景色以及转换动画的设置，适合初学者学习和进阶实践。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
    margin:0;padding:0;}
			
			#dkk{
   width:200px;
				height:200px;
				position:absolute;/*大盒子先居中可以用其他效果居中*/
                left:50%;
                top:50%;
                transform: translateX(-50%) translateY(-50%);
				perspective:1000px;/*透视效果*/
				}
			
			.big{
   /*这个就是正方体了*/
				position: relative;
				width:200px;
				height:200px;
				transform-style: preserve-3d;/*变成3D效果*/
				-ms-transform-style: preserve-3d;/*兼容浏览器*/
				transform:rotateX(-60deg) rotateY(-60deg) rotateZ(0deg);
				animation

最低0.47元/天解锁文章

口袋妖怪叶藤蛇

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS制作3D旋转正方体

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0;padding:0;} #dkk{width:200px; height:200px; position:absolute;/*大盒子先居中可以用其他效果居中*/ le
复制链接

扫一扫