Главная » Языки программирования

3d cube with css

Содержание
  1. 35+ CSS Cubes — Free Code + Demos
  2. Collection of 35+ CSS Cubes. All items are 100% free and open-source.
  3. 1. Zero Element: Cube
  4. 2. CSS-Only Cube Pack
  5. 3. Levitating Webpack 3 Logo — CSS
  6. 4. Spinning 3d Cube — Pure CSS
  7. 5. Pure CSS 3D Cube Assembly Animation (Chrome)
  8. 6. Zero Element: Cube
  9. 7. Pure CSS Shaded Cube Wheels (no Firefox)
  10. 8. New Cube Thingy
  11. 9. Untitled
  12. 10. Waving Cubes CSS
  13. 11. Cube Flipping Loader
  14. 12. CSS Waving Cubes 2
  15. 13. CSS Fruit Cubes (no JS)
  16. 14. 80s Retro Spinning Cube
  17. 15. 3D Cube Image Gallery
  18. 16. A Simple CSS 3D Cube
  19. 17. PURE CSS 3D CUBE
  20. 18. Abstract Cube
  21. 19. 3D Cube Social Media Pure Css3 Animation
  22. 20. PURE CSS 3D CUBE
  23. 21. 3D CSS Cube With Vertical Rotate On Hover
  24. 22. 3D Nahal Cube
  25. Создаем 3D куб на чистом CSS
  26. Основы
  27. Куб
  28. 39 CSS Cubes
  29. Related Articles
  30. Author
  31. Links
  32. Made with
  33. About a code
  34. CSS Only Interactive Cube
  35. Author
  36. Links
  37. Made with
  38. About a code
  39. CSS Only Cubes Hover Effects
  40. Author
  41. Links
  42. Made with
  43. About a code
  44. CSS Only 3D Cube Image Slider
  45. Author
  46. Links
  47. Made with
  48. About a code
  49. Only CSS: Noisy Cube
  50. Author
  51. Links
  52. Made with
  53. About a code
  54. Pure CSS 3D Morph Cube ➜ Cubocta ➜ Octa
  55. Author
  56. Links
  57. Made with
  58. About a code
  59. What Got You so Jumpy?
  60. Author
  61. Links
  62. Made with
  63. About a code
  64. Bubbly #5. Pure CSS 3D
  65. Author
  66. Links
  67. Made with
  68. About a code
  69. CSS Cubes
  70. Author

35+ CSS Cubes — Free Code + Demos

Collection of 35+ CSS Cubes. All items are 100% free and open-source.

1. Zero Element: Cube

2. CSS-Only Cube Pack

Based on an animation by Joseph Ryba: https://www.instagram.com/p/BaFwMjpgu2a/?taken-by=joe_ryba Works best on Chrome.

Читайте также:  Python дата вчерашнего дня

3. Levitating Webpack 3 Logo — CSS

4. Spinning 3d Cube — Pure CSS

This is a pure CSS recreation of @beesandbombs gif https://twitter.com/beesandbombs/status/872082549610348544 of a spinning 3d cube with changing faces

5. Pure CSS 3D Cube Assembly Animation (Chrome)

Live coded in 30 min on the 13th of December 2016. Tested & works in Chrome. Firefox has 3D order issues. Edge has problems when using both 3D transforms & filters + 3D transform animation issues. Inspired by this Shutterstock video.

6. Zero Element: Cube

7. Pure CSS Shaded Cube Wheels (no Firefox)

8. New Cube Thingy

9. Untitled

10. Waving Cubes CSS

11. Cube Flipping Loader

12. CSS Waving Cubes 2

13. CSS Fruit Cubes (no JS)

14. 80s Retro Spinning Cube

An image gallery in form of a 3D cube. The demo uses CSS3 3D and animation properties to create a nice animated cube. Image credits: Parag Gour (my brother)

16. A Simple CSS 3D Cube

17. PURE CSS 3D CUBE

18. Abstract Cube

19. 3D Cube Social Media Pure Css3 Animation

20. PURE CSS 3D CUBE

21. 3D CSS Cube With Vertical Rotate On Hover

22. 3D Nahal Cube

This is an animated 3D cube which has a logo called «Nahal»; Nahal is a brand for my brother;he builds whiteBoard and blackBoard

Источник

Создаем 3D куб на чистом CSS

Во многих книгах по 3D графике можно увидеть пример куба, с текстом / текстурами на каждой грани. Нарисовать такое на canvas с использованием javascript, проблемы не составляет, но мало кто знает, что сделать такое можно и на чистом CSS.

Читайте также:  Php http response object

В данной статье мне хотелось бы показать несколько примеров 3D-преобразования на CSS.

Основы

Для начала давайте ознакомимся со свойствами perspective и transform: rotate();.

Простой, пример, прямоугольник, в котором находиться повернутый блок:

pic1

Тут стоит обратить внимание на rotateY(45deg) — угол поворота в 45 градусов и perspective(400px), тут сложно объяснить на пальцах, проще почитать в документации

Есть другой вариант, записи, через transform: perspective(400px) rotateY(45deg); который дает такой же эффект:

Куб

Не будем ходить ходить вокруг и сразу посмотрим демонстрацию:

Но, тут все же оговорюсь — я немного слукавил и для данного примера использую JavaScript, но не для прорисовки куба и даже не для вращения, а только для изменения класса который отвечает, какая грань сейчас впереди.

Основная идея всего действ а:

.cube_wrapper < /* Добавляем обертке перспективу */ perspective: 400px; >.cube < /* Делаем сам куб 3Дшным */ transform-style: preserve-3d; transform: translateZ(-100px); transition: transform 1s; >.cube__side--front < /* Каждой грани назначаем цвет и ориентацию в пространстве (поворот) */ background: hsla( 0, 100%, 50%, 0.7); transform: rotateY( 0deg) translateZ(100px); >.cube.show-back < /* вращаем куб, ставя вперёд нужной гранью */ transform: translateZ(-100px) rotateY(-180deg); >
Front
 
Back
 
Right
 
Left
 
Top
 
Bottom

И небольшое отступление, вместо цветной грани можно использовать картинку.

pic1

это потребует небольших правок:

Собственно наша основа — CSS код:

.cube_wrapper < width: 200px; height: 200px; border: 1px solid #CCC; margin: 80px; perspective: 400px; >.cube < width: 200px; height: 200px; position: relative; transform-style: preserve-3d; transform: translateZ(-100px); transition: transform 1s; >.cube__side < position: absolute; width: 200px; height: 200px; border: 2px solid black; line-height: 200px; font-size: 40px; font-weight: bold; color: white; text-align: center; >.cube__side—front < background: hsla( 0, 100%, 50%, 0.7); transform: rotateY( 0deg) translateZ(100px); >.cube__side—right < background: hsla( 60, 100%, 50%, 0.7); transform: rotateY( 90deg) translateZ(100px); >.cube__side—back < background: hsla(120, 100%, 50%, 0.7); transform: rotateY(180deg) translateZ(100px); >.cube__side—left < background: hsla(180, 100%, 50%, 0.7); transform: rotateY(-90deg) translateZ(100px); >.cube__side—top < background: hsla(240, 100%, 50%, 0.7); transform: rotateX( 90deg) translateZ(100px); >.cube__side—bottom < background: hsla(300, 100%, 50%, 0.7); transform: rotateX(-90deg) translateZ(100px); >.cube.show-front < transform: translateZ(-100px) rotateY( 0deg); >.cube.show-right < transform: translateZ(-100px) rotateY( -90deg); >.cube.show-back < transform: translateZ(-100px) rotateY(-180deg); >.cube.show-left < transform: translateZ(-100px) rotateY( 90deg); >.cube.show-top < transform: translateZ(-100px) rotateX( -90deg); >.cube.show-bottom

И javascript для смены активной стороны по таймеру:

function removeClasses(el, prefix) < let classes = el.className.split(" ").filter(function(c) < return c.lastIndexOf(prefix, 0) !== 0; >); el.className = classes.join(" ").trim(); > const cube = document.getElementById("cube"); let aSides = ["front", "back", "right", "left", "top", "bottom"] function soRotate() < const prefix = "show-"; removeClasses(cube, prefix); const rand = Math.floor(Math.random() * aSides.length); cube.classList.add(prefix + aSides[rand]); >setInterval(soRotate, 4000);

Источник

39 CSS Cubes

Collection of free CSS cube code examples from Codepen, GitHub, and other resources. Update of April 2021 collection. Seventeen new items.

Author

Made with

About a code

CSS Only Interactive Cube

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Only Cubes Hover Effects

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Only 3D Cube Image Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Only CSS: Noisy Cube

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Pure CSS 3D Morph Cube ➜ Cubocta ➜ Octa

What’s going on here: start with a cube, truncate to get a truncated cube, rectify to get a cuboctahedron, reverse rectify to get a truncated octahedron, reverse truncation to get an octahedron. The tiny edge gaps between the faces are intentional in order to see through to the darker faces in the back. The octahedron is the dual of the cube and the other way around.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

What Got You so Jumpy?

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Bubbly #5. Pure CSS 3D

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Cubes

Author

Made with

About a code

CSS Cubes

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Cube of Cubes

Author

Источник

Оцените статью