• CSS3之两面翻转的盒子案例

    目录

                    第一步：不多说，首先我们先来一个框架

                    第二步：添加两个盒子

                    第三步：这里的话我们先给最大盒子添加一下样式

                    第四步：我们给两个div小盒子添加一下样式

                    第五步：添加背景颜色

                    第七步：调整代码

                    第八步：制作动画

                    第九步：优化

     

     

                    第一步：不多说，首先我们先来一个框架

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 	body>
    9. html>

                    第二步：添加两个盒子

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		 
    9. 		    <div class="bodys">
    10. 		        <div class="first">我是翻转前div>
    11. 		        <div class="two">我是翻转后div>
    12. 		    div>
    13.  
    14. 	body>
    15. html>

            第三步：这里的话我们先给最大盒子添加一下样式

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 			<style>
    8. 				    #bodys {
    9. 				            position: relative;
    10. 				            width: 350px;
    11. 				            height: 350px;
    12. 				            transform-style: preserve-3d;			/*这个属性就是让其出现翻转效果的核心*/
    13. 							 margin: 200px auto;   
    14. 				        }
    15. 				
    16. 				
    17. 			style>
    18. 	<body>
    19.  
    20. 		<div id="bodys">
    21. 			<div class="first">我是翻转前div>
    22. 			<div class="two">我是翻转后div>
    23. 		div>
    24.  
    25. 	body>
    26. html>

    这里的话我给大合照加了一个宽高，和外边距主要是改变一下位置，方便我们看变化，其中

     transform-style: preserve-3d;属性

            第四步：我们给两个div小盒子添加一下样式

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<style>
    8. 		#bodys {
    9. 			position: relative;
    10. 			width: 350px;
    11. 			height: 350px;
    12. 			transform-style: preserve-3d;
    13. 			/*这个属性就是让其出现翻转效果的核心*/
    14. 			margin: 200px auto;
    15. 		}
    16.  
    17.  
    18. 		.first,
    19. 		.two {
    20. 			position: absolute;
    21. 			top: 0;
    22. 			left: 0;
    23. 			width: 100%;
    24. 			height: 100%;
    25. 			text-align: center;
    26. 			line-height: 300px;
    27. 			color: aqua;
    28. 			border-radius: 50%;
    29.             font-size: 20px;
    30. 		}
    31. 	style>
    32. 	<body>
    33.  
    34. 		<div id="bodys">
    35. 			<div class="first">我是翻转前div>
    36. 			<div class="two">我是翻转后div>
    37. 		div>
    38.  
    39. 	body>
    40. html>

     

           这里出现这样的原因是因为我们还没有添加背景颜色，现在给添加上 

            第五步：添加背景颜色

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<style>
    8. 		#bodys {
    9. 			position: relative;
    10. 			width: 350px;
    11. 			height: 350px;
    12. 			transform-style: preserve-3d;
    13. 			/*这个属性就是让其出现翻转效果的核心*/
    14. 			margin: 200px auto;
    15. 		}
    16.  
    17.  
    18. 		.first,
    19. 		.two {
    20. 			position: absolute;
    21. 			top: 0;
    22. 			left: 0;
    23. 			width: 100%;
    24. 			height: 100%;
    25. 			font-size: 30px;
    26. 			text-align: center;
    27. 			line-height: 300px;
    28. 			color: aqua;
    29. 			border-radius: 50%;
    30. 		}
    31.  
    32. 		.first {
    33. 			background-color: chocolate;
    34. 		}
    35.  
    36. 		.two {
    37. 			background-color: crimson;
    38. 		}
    39. 	style>
    40. 	<body>
    41.  
    42. 		<div id="bodys">
    43. 			<div class="first">我是翻转前div>
    44. 			<div class="two">我是翻转后div>
    45. 		div>
    46.  
    47. 	body>
    48. html>

     

     大家可以发现，虽然说我们的动画还没开始动，但现在是不是应该就相当于动画做好后，反翻转前，所以是不是应该显示的是翻转前的圆？这里我们就要用到z-index

            第七步：调整代码

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<style>
    8. 		#bodys {
    9. 			position: relative;
    10. 			width: 350px;
    11. 			height: 350px;
    12. 			transform-style: preserve-3d;
    13. 			/*这个属性就是让其出现翻转效果的核心*/
    14. 			margin: 200px auto;
    15. 		}
    16.  
    17.  
    18. 		.first,
    19. 		.two {
    20. 			position: absolute;
    21. 			top: 0;
    22. 			left: 0;
    23. 			width: 100%;
    24. 			height: 100%;
    25. 			font-size: 30px;
    26. 			text-align: center;
    27. 			line-height: 300px;
    28. 			color: aqua;
    29. 			border-radius: 50%;
    30. 		}
    31.  
    32. 		.first {
    33. 			background-color: chocolate;
    34.             z-index:999;
    35. 		}
    36.  
    37. 		.two {
    38. 			background-color: crimson;
    39. 		}
    40. 	style>
    41. 	<body>
    42.  
    43. 		<div id="bodys">
    44. 			<div class="first">我是翻转前div>
    45. 			<div class="two">我是翻转后div>
    46. 		div>
    47.  
    48. 	body>
    49. html>

     

     这样就达到了我们想要的效果，那么准备工作都做好了，所以我们现在就开始做动画啦

            第八步：制作动画

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<style>
    8. 		#bodys {
    9. 			position: relative;
    10. 			width: 350px;
    11. 			height: 350px;
    12.  
    13. 			/*这个属性就是让其出现翻转效果的核心*/
    14. 			margin: 200px auto;
    15. 			transform-style: preserve-3d;
    16. 			transition: all 0.5s;
    17.  
    18. 		}
    19.  
    20. 		#bodys:hover {
    21. 			transform: rotateY(180deg);
    22. 		}
    23.  
    24.  
    25. 		.first,
    26. 		.two {
    27. 			position: absolute;
    28. 			top: 0;
    29. 			left: 0;
    30. 			width: 100%;
    31. 			height: 100%;
    32. 			font-size: 30px;
    33. 			text-align: center;
    34. 			line-height: 300px;
    35. 			color: aqua;
    36. 			border-radius: 50%;
    37. 		}
    38.  
    39. 		.first {
    40. 			background-color: chocolate;
    41. 			z-index: 999;
    42. 		}
    43.  
    44. 		.two {
    45. 			background-color: crimson;
    46. 			
    47. 		}
    48. 	style>
    49. 	<body>
    50.  
    51. 		<div id="bodys">
    52. 			<div class="first">我是翻转前div>
    53. 			<div class="two">我是翻转后div>
    54. 		div>
    55.  
    56. 	body>
    57. html>

     这里我们给#bodys添加了一个transform: rotateY(180deg); 目前的话我们已经可以初步实现翻转了，但背景色和文字还没有改变，所以我们要继续添加

            第九步：优化

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<style>
    8. 		#bodys {
    9. 			position: relative;
    10. 			width: 350px;
    11. 			height: 350px;
    12.  
    13. 			/*这个属性就是让其出现翻转效果的核心*/
    14. 			margin: 200px auto;
    15. 			transform-style: preserve-3d;
    16. 			transition: all 0.5s;
    17.  
    18. 		}
    19.  
    20. 		#bodys:hover {
    21. 			transform: rotateY(180deg);
    22. 		}
    23.  
    24.  
    25. 		.first,
    26. 		.two {
    27. 			position: absolute;
    28. 			top: 0;
    29. 			left: 0;
    30. 			width: 100%;
    31. 			height: 100%;
    32. 			font-size: 30px;
    33. 			text-align: center;
    34. 			line-height: 300px;
    35. 			color: aqua;
    36. 			border-radius: 50%;
    37. 		}
    38.  
    39. 		.first {
    40. 			background-color: chocolate;
    41. 			z-index: 999;
    42. 		}
    43.  
    44. 		.two {
    45. 			background-color: crimson;
    46. 			transform: rotateY(180deg);
    47. 		}
    48. 	style>
    49. 	<body>
    50.  
    51. 		<div id="bodys">
    52. 			<div class="first">我是翻转前div>
    53. 			<div class="two">我是翻转后div>
    54. 		div>
    55.  
    56. 	body>
    57. html>

     这里的话我们给。two添加了一个翻转，原因是因为前面的代码实现的效果都是.first的内容，所以我们想要。two实现，就要给他加一个翻转，这里是个人理解，初步接触这一块，不确定一定对

             下方附上全部代码

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<style>
    8. 		#bodys {
    9. 			position: relative;
    10. 			width: 350px;
    11. 			height: 350px;
    12.  
    13. 			/*这个属性就是让其出现翻转效果的核心*/
    14. 			margin: 200px auto;
    15. 			transform-style: preserve-3d;
    16. 			transition: all 0.5s;
    17.  
    18. 		}
    19.  
    20. 		#bodys:hover {
    21. 			transform: rotateY(180deg);
    22. 		}
    23.  
    24.  
    25. 		.first,
    26. 		.two {
    27. 			position: absolute;
    28. 			top: 0;
    29. 			left: 0;
    30. 			width: 100%;
    31. 			height: 100%;
    32. 			font-size: 30px;
    33. 			text-align: center;
    34. 			line-height: 300px;
    35. 			color: aqua;
    36. 			border-radius: 50%;
    37. 		}
    38.  
    39. 		.first {
    40. 			background-color: chocolate;
    41. 			z-index: 999;
    42. 		}
    43.  
    44. 		.two {
    45. 			background-color: crimson;
    46. 			transform: rotateY(180deg);
    47. 		}
    48. 	style>
    49. 	<body>
    50.  
    51. 		<div id="bodys">
    52. 			<div class="first">我是翻转前div>
    53. 			<div class="two">我是翻转后div>
    54. 		div>
    55.  
    56. 	body>
    57. html>

  • 相关阅读:
    使用Go和Node.js构建用静态脚本进行数据解析的TCP服务器
    08.23递归 以及python算法(快排,冒泡,选择)
    LVS集群
    【Linux】程序地址空间
    第三阶段第一章——PySpark实战
    Mysql-Xtrabackup备份恢复
    【Rust日报】2022-12-05 探索 docker 的 WASM 技术预览
    The ‘＜‘ operator is reserved for future use. 错误解决
    shell脚本入门
    vue2.6 + ts 使用vuex
  • 原文地址：https://blog.csdn.net/tea_tea_/article/details/125897494