Обновление материала, исправлены ошибки, добавлен перевод

ademaro · ademaro · commit e3d3e0a10476 · 2025-01-28T22:01:29.000+03:00
diff --git a/README.md b/README.md
@@ -1,23 +1,23 @@
-# Intro to CSS 3D transforms
+# Введение в CSS 3D трансформации
 
-By [David DeSandro](https://desandro.com)
+Автор: [David DeSandro](https://desandro.com)
 
-[3dtransforms.desandro.com](https://3dtransforms.desandro.com)
+[3dtransforms.desandro.com](https://3dtransforms.desandro.com) или [makehtml.github.io/3dtransforms/](https://makehtml.github.io/3dtransforms/)
 
-Tutorial, examples, and discussion all about CSS 3D transforms.
+Туториал, примеры и обсуждения, посвящённые CSS 3D трансформациям.
 
-Originally written for [24 ways 2010](https://24ways.org/2010/intro-to-css-3d-transforms).
+Изначально написано для [24 ways 2010](https://24ways.org/2010/intro-to-css-3d-transforms).
 
-## Viewing this project locally
+## Просмотр проекта локально
 
-This project is built with [Jekyll](https://jekyllrb.com).
+Этот проект построен с использованием [Jekyll](https://jekyllrb.com).
 
     git clone https://github.com/desandro/3dtransforms.git
     cd 3dtransforms/
     jekyll serve
 
-## License
+## Лицензия
 
-Written content is licensed under a [Creative Commons Attribution License](https://creativecommons.org/licenses/by/4.0/).
+Текстовый контент лицензирован по [лицензии Creative Commons Attribution](https://creativecommons.org/licenses/by/4.0/).
 
-Example code is licensed under the [MIT license](https://desandro.mit-license.org). Have at it.
+Код примеров лицензирован по [лицензии MIT](https://desandro.mit-license.org). Используйте на здоровье.
diff --git a/_config.yml b/_config.yml
@@ -1,7 +1,7 @@
 permalink: /:slug
 
 # site-wide data
-site_name: Intro to CSS 3D transforms
+site_name: Введение в 3D трансформации в CSS
 
 plugins:
   - jekyll-redirect-from
diff --git a/_includes/edit-codepen.html b/_includes/edit-codepen.html
@@ -1,10 +1,8 @@
 <p class="edit-codepen">
   <a class="edit-codepen__link" href="https://codepen.io/desandro/pen/{{include.pen_slug}}">
-      <svg class="codepen-logo" xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24" width="24" height="24"
-        fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round">
-        <path d="M3 9l9-6l9 6v6l-9 6l-9-6zm0 0l9 6l9-6m0 6l-9-6l-9 6m9-12v6m0 6v6" />
-      </svg>
-    <span class="edit-codepen__text">Edit this demo on CodePen</span>
+    <svg class="codepen-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round">
+      <path d="M3 9l9-6l9 6v6l-9 6l-9-6zm0 0l9 6l9-6m0 6l-9-6l-9 6m9-12v6m0 6v6" />
+    </svg>
+    <span class="edit-codepen__text">Посмотреть пример на CodePen</span>
   </a>
 </p>
diff --git a/_layouts/doc.html b/_layouts/doc.html
@@ -1,65 +1,60 @@
 <!doctype html>
-<html lang="en">
+<html lang="ru">
 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
 
   <title>{% unless page.is_homepage %}{{ page.title }} &middot; {% endunless %}{{ site.site_name }}</title>
 
   <link rel="stylesheet" href="css/style.css" />
 
 </head>
-<body class="page--{{page.slug}}">
-
+<body class="page page--{{page.slug}}">
   <nav class="site-nav">
     <div class="site-nav__container">
       <h1 class="site-nav__title"><a href=".">{{ site.site_name }}</a></h1>
       <ul class="site-nav__list">
-        <li class="nav-item-intro"><a href=".">Introduction</a></li>
-        <li class="nav-item-perspective"><a href="perspective">Perspective</a></li>
-        <li class="nav-item-functions"><a href="3d-transform-functions">3D transform functions</a></li>
-        <li class="nav-item-card"><a href="card-flip">Card flip</a></li>
-        <li class="nav-item-cube"><a href="cube">Cube</a></li>
-        <li class="nav-item-box"><a href="box">Box</a></li>
-        <li class="nav-item-carousel"><a href="carousel">Carousel</a></li>
-        <li class="nav-item-conclusion"><a href="conclusion">Conclusion</a></li>
+        <li class="site-nav__item site-nav__item--intro"><a href=".">Введение</a></li>
+        <li class="site-nav__item site-nav__item--perspective"><a href="perspective">Перспектива</a></li>
+        <li class="site-nav__item site-nav__item--functions"><a href="3d-transform-functions">Функции 3D-трансформаций</a></li>
+        <li class="site-nav__item site-nav__item--card"><a href="card-flip">Переворот карточки</a></li>
+        <li class="site-nav__item site-nav__item--cube"><a href="cube">Cube</a></li>
+        <li class="site-nav__item site-nav__item--box"><a href="box">Box</a></li>
+        <li class="site-nav__item site-nav__item--carousel"><a href="carousel">Carousel</a></li>
+        <li class="site-nav__item site-nav__item--conclusion"><a href="conclusion">Conclusion</a></li>
       </ul>
     </div>
   </nav>
 
   <section class="content" id="content">
-
     {% if page.is_homepage %}
       <div class="scene scene--hero">
         <div class="cube cube--hero is-spinning">
-          <div class="cube__face cube__face--front">front</div>
-          <div class="cube__face cube__face--right">right</div>
-          <div class="cube__face cube__face--back">back</div>
-          <div class="cube__face cube__face--left">left</div>
-          <div class="cube__face cube__face--top">top</div>
-          <div class="cube__face cube__face--bottom">bottom</div>
+          <div class="cube__face cube__face--front">лицевая</div>
+          <div class="cube__face cube__face--back">задняя</div>
+          <div class="cube__face cube__face--right">правая</div>
+          <div class="cube__face cube__face--left">левая</div>
+          <div class="cube__face cube__face--top">верхняя</div>
+          <div class="cube__face cube__face--bottom">нижняя</div>
         </div>
       </div>
     {% endif %}
 
     <h1>{{ page.title }}</h1>
 
     {{ content }}
-
   </section>
 
   <footer>
-    <p><a href=".">{{ site.site_name }}</a> by David DeSandro</p>
-    <p>Written content licensed <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY</a>.
-        All example code licensed <a href="https://desandro.mit-license.org/">MIT</a>.</p>
-    <p>Help improve these docs. <a href="https://github.com/desandro/3dtransforms/issues/">Open an issue or pull request on GitHub.</a></p>
+    <p><a href=".">{{ site.site_name }}</a> автор — David DeSandro</p>
+    <p>Текстовое содержимое лицензировано по лицензии <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY</a>.
+        Весь код примеров лицензирован по лицензии <a href="https://desandro.mit-license.org/">MIT</a>.</p>
+    <p>Помогите улучшить эту документацию. <a href="https://github.com/makehtml/3dtransforms/issues/">Откройте задачу или пул-реквест на GitHub.</a></p>
   </footer>
 
-
-  <script src="../js/utils.js"></script>
+  <script src="./js/utils.js"></script>
   {% if page.script %}
-    <script src="../js/{{page.script}}"></script>
+    <script src="./js/{{ page.script }}"></script>
   {% endif %}
-
 </body>
 </html>
diff --git a/css/style.css b/css/style.css
@@ -100,30 +100,15 @@ blockquote {
 }
 
 /* seleted nav item */
-.page--intro .nav-item-intro a,
-.page--perspective .nav-item-perspective a,
-.page--functions .nav-item-functions a,
-.page--card .nav-item-card a,
-.page--cube .nav-item-cube a,
-.page--box .nav-item-box a,
-.page--carousel .nav-item-carousel a,
-.page--conclusion .nav-item-conclusion a {
+.site-nav__item a {
   font-weight: bold;
   color: #333;
 }
-.page--intro .nav-item-intro a:hover,
-.page--perspective .nav-item-perspective a:hover,
-.page--functions .nav-item-functions a:hover,
-.page--card .nav-item-card a:hover,
-.page--cube .nav-item-cube a:hover,
-.page--box .nav-item-box a:hover,
-.page--carousel .nav-item-carousel a:hover,
-.page--conclusion .nav-item-conclusion a:hover {
+.site-nav__item a:hover {
   color: white;
 }
 
 @media screen and (min-width: 768px) {
-
   .content {
     padding-left: 220px;
   }
@@ -160,7 +145,6 @@ blockquote {
   footer {
     margin-left: 220px;
   }
-
 }
 
 
diff --git a/js/perspective.js b/js/perspective.js
@@ -1,5 +1,4 @@
 // perspective cube
-
 (() => {
   const demo = document.querySelector('.demo--persp-cube');
   const scene = demo.querySelector('.scene');
@@ -65,5 +64,4 @@
   backfaceCheckbox.addEventListener('change', () => {
     cube.classList.toggle('is-backface-hidden', !backfaceCheckbox.checked);
   });
-
 })();
diff --git a/js/utils.js b/js/utils.js
@@ -34,5 +34,4 @@
   // Initialize RangeDisplays
   const ranges = document.querySelectorAll('input[type="range"]');
   ranges.forEach(range => new RangeDisplay(range));
-
 })();
diff --git a/perspective.md b/perspective.md
@@ -119,9 +119,7 @@ perspective: 400px;
 По умолчанию точка схода для 3D-пространства расположена в центре. Вы можете изменить положение этой точки с помощью свойства [`perspective-origin`](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin).
 
 {% highlight css %}
-
 perspective-origin: 25% 75%;
-
 {% endhighlight %}
 
 <div class="demo demo--persp-cube">
@@ -138,31 +136,31 @@ perspective-origin: 25% 75%;
   <p>
     <label>
       перспектива
-      <input class="perspective-range" type="range" min="1" max="1000" value="400" data-units="px" />
+      <input class="perspective-range" type="range" min="1" max="1000" value="400" data-units="px">
     </label>
   </p>
   <p>
     <label>
       точка схода по оси X
-      <input class="origin-x-range" type="range" min="0" max="100" value="50" data-units="%" />
+      <input class="origin-x-range" type="range" min="0" max="100" value="50" data-units="%">
     </label>
   </p>
   <p>
     <label>
       точка схода по оси Y
-      <input class="origin-y-range" type="range" min="0" max="100" value="50" data-units="%" />
+      <input class="origin-y-range" type="range" min="0" max="100" value="50" data-units="%">
     </label>
   </p>
   <p>
     <label>
       Крутить куб
-      <input class="spin-cube-checkbox" type="checkbox" />
+      <input class="spin-cube-checkbox" type="checkbox">
     </label>
   </p>
   <p>
     <label>
       Видимая задняя грань
-      <input class="backface-checkbox" type="checkbox" checked />
+      <input class="backface-checkbox" type="checkbox" checked>
     </label>
   </p>
 </div>
